需要幫助來切換使用同一類的下拉菜單（Javascript）

Question

我正在嘗試使用類名“ .sub-menu-parent”使它適用於所有元素，但我只能使其在其第一個實例中起作用。

我嘗試過使用帶有parentClass索引的for循環，但是它似乎不起作用。 '.sub-menu-child'類也是如此。

的HTML

        <nav>
            <div class="row">
                <img src="resources/img/logos/HTH_Logo_1_2.png" alt="A logo that says 'hearts that heal'" class="logo">
                <ul class="main-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#" class="sub-menu--parent">About Us <i class="ion-android-arrow-dropdown"></i></a>
                        <ul class="drop-down-main sub-menu--child">
                            <li><a href="#">Who We Are</a></li>
                            <li><a href="#">Mission Statement</a></li>
                            <li><a href="#">Vision Statement</a></li>
                            <li><a href="#">Our Values</a></li>
                            <li><a href="#">Goals</a></li>
                            <li><a href="#">Objectives</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="sub-menu--parent">Photo Gallery <i class="ion-android-arrow-dropdown"></i></a>
                        <ul class="drop-down-main sub-menu--child">
                            <li><a href="#">Group Photos</a></li>
                            <li><a href="#">Retreat Photos</a></li>
                            <li><a href="#">Members Photos</a></li>
                            <li><a href="#">Honorary Members Photos</a></li>
                            <li><a href="#">Our Beloved Children</a></li>
                            <li><a href="#">Activities and Sponsorship Photos</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>

                </ul>
            </div>
        </nav>

的CSS

/* ----- MAIN NAV ----- */

.main-nav   {
    float: right;
    list-style-type: none;
    margin-top: 32.5px;
}

.main-nav li    {
    display: inline;
    text-align: center;

}

.main-nav li a:link, 
.main-nav li a:visited {
    text-decoration: none;
    color: #fff; 
    padding: 5px 10px;
    font-weight: 400;
    font-size: 80%;  
    background-color: #c95a6c;  /* #484066 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.main-nav li a:hover, 
.main-nav li a:active {
    background-color: #fff;
    color: #c95a6c;
}

/* ----- For colors ----- */

.main-nav-color:focus {
    color: #c95a6c !important; 
    background-color: #fff !important;  /* #484066 */
}


/* ----- NESTED NAV ----- */

.drop-down-main {
    position: absolute;
    z-index: 9990;
    background-color: #fff; 
    display: none;
    margin-top: 5px;
    border: 1px solid #484066;
    border-top: none;
}

.show {
    display: block;
}

.drop-down-main li  {
    display: block;
    text-align: left;
    border-bottom: 1px solid #484066;
    width: 100%;

}

.drop-down-main li a:link, 
.drop-down-main li a:visited {
    display: block;
    text-decoration: none;
    color: #c95a6c; 
    font-weight: 400;
    font-size: 80%;  
    background: none;  /* #484066 */
    border-radius: 0;
    padding: 5px 24px 5px 5px;
}

.drop-down-main li:hover, 
.drop-down-main li:active {
    background-color: #c95a6c;
}

.drop-down-main li a:hover, 
.drop-down-main li a:active {
    color: #fff;
}

.drop-down-main li:first-child {
    margin-top: 10px;
    border-top: 1px solid #484066;
}

.drop-down-main li:last-child {
    border: none;
}

Java腳本

var menuToggle = (function() {
    var DOMstrings = {
        displayToggle: 'show',
        dropParent: '.sub-menu--parent',
        dropChild: '.sub-menu--child',
        colorToggle: 'main-nav-color',
    };

    var parentClass = document.querySelector(DOMstrings.dropParent);
    var childClass = document.querySelector(DOMstrings.dropChild);


    parentClass.addEventListener('click', toggleDropdown, false);

    function toggleDropdown() {
        childClass.classList.toggle(DOMstrings.displayToggle);
        parentClass.classList.toggle(DOMstrings.colorToggle);
    };

    window.addEventListener('click', function(event) {
        if(event.target !== parentClass && event.target.parentNode !== parentClass) {
            childClass.classList.remove(DOMstrings.displayToggle);
            parentClass.classList.remove(DOMstrings.colorToggle);
        }
    });   
})();

我也嘗試過使用querySelectorAll，但是似乎不能將classList方法與它一起使用。

Answer 1

您應該使用querySelectorAll

根據以下答案： 將事件偵聽器添加到基於類的DOM元素

document.querySelector('.class-name'); 將僅選擇第一個具有class='class-name'元素。 要將事件偵聽器添加到所有此類元素，請使用querySelectorAll()

然后在附加偵聽器的位置更新代碼。

var parentClasses = document.querySelectorAll(DOMstrings.dropParent);

for (var i = 0; i < parentClasses.length; i++) {
    parentClasses[i].addEventListener('click', setupEventListener(parentClasses[i]), false);
}

function setupEventListener(element){
    return function(){
        toggleDropdown(element);
    }
}

function toggleDropdown(element) {
    // since `ul` is a sibling of `a` 
    element.nextElementSibling.classList.toggle(DOMstrings.displayToggle);
    element.classList.toggle(DOMstrings.colorToggle);
};

我認為這應該適用於您當前的實現，但是其中不包含用於切換顯示的代碼。