手風琴選單下拉選單僅適用于第一個下拉選單

我正在嘗試使用簡單的 HTML 和 JS 實作一個簡單的手風琴下拉選單。下面顯示了相關的 JS、CSS 和 HTML 代碼。

var heading = document.getElementsByClassName("drop_title");
var headingNumber = heading.length;

for (var i = 0 ; i < headingNumber; i  ) {
    heading[i].addEventListener("click", () => {
        document.querySelector('.accordion_box li ul').classList.toggle('drop_list')
    });
}

.accordion_box {
    background: #004d7a;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    width:50%;
    margin-top: 25%;
}

.accordion_box ul li {
    list-style-type:none;
}

.drop_title {
    font-size:17px;
    padding:0 10px;
}

.drop_title:hover{
    border-left: 5px solid #a8eb12;
    border-bottom: 5px solid #a8eb12;
}

.accordion_box ul ul li a{
    color:white;
    font-size:14px;
    text-decoration:none;
}

.accordion_box ul ul li a:hover{
    border-left: 5px solid #a8eb12;
}

.drop_list{
    display:none;
}

.accordion_box li.active ul{
    display:block;
    transition: all 2s ease-in-out;
}

<div class="accordion_box">
    <ul>
        <li>
            <h3 class="drop_title">Menu One</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li>
            <h3 class="drop_title">Menu Two</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li>
            <h3 class="drop_title">Menu Three</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li>
            <h3 class="drop_title">Menu Four</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
    </ul>
</div>

當我點擊選單一時，我可以顯示和隱藏串列。但是當我點擊任何其他標題時，不是下拉相關串列，而是下拉選單一。

我能知道我在這里做錯了什么嗎？

uj5u.com熱心網友回復：

如果你想給所有元素事件點擊，你可以使用 forEach，在函式上你必須給一個引數，然后你必須通過引數添加事件點擊，通過引數你可以選擇父元素，然后找到元素你想切換類。

這是代碼：

var heading = document.querySelectorAll(".drop_title");
var headingNumber = heading.length;

heading.forEach(function(el) {
    el.addEventListener("click", function() {
       el.parentNode.querySelector('.accordion_box li ul').classList.toggle('drop_list');
    });
});

.accordion_box {
    background: #004d7a;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    width:50%;
    margin-top: 25%;
}

.accordion_box ul li {
    list-style-type:none;
}

.drop_title {
    font-size:17px;
    padding:0 10px;
}

.drop_title:hover{
    border-left: 5px solid #a8eb12;
    border-bottom: 5px solid #a8eb12;
}

.accordion_box ul ul li a{
    color:white;
    font-size:14px;
    text-decoration:none;
}

.accordion_box ul ul li a:hover{
    border-left: 5px solid #a8eb12;
}

.drop_list{
    display:none;
}

.accordion_box li.active ul{
    display:block;
    transition: all 2s ease-in-out;
}

<div class="accordion_box">
    <ul>
        <li>
            <h3 class="drop_title">Menu One</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li>
            <h3 class="drop_title">Menu Two</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li>
            <h3 class="drop_title">Menu Three</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
        <li>
            <h3 class="drop_title">Menu Four</h3>
            <ul class="drop_list">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li>
    </ul>
</div>

標籤：javascript html css

上一篇：如何在css中使用transform屬性來獲取邊框線

下一篇：角墊標簽和輸入并排