javascript - 使用 HTML、CSS 和 JS 的侧边栏多级下拉菜单

Question

我正在使用 JS 在子下拉列表中循环相关数组；假设列表是一个循环元素 i。我想根据时间循环运行的次数自动生成一个多级下拉列表。当我在没有循环的情况下尝试时，它工作正常，但是当我在循环中尝试时，它只显示第 2 级下拉菜单，但在单击它们以进一步进入第 3 级下拉菜单时没有响应。

下面的 HTML

<div class="sidenav">
                    <button class="dropdown-btn"><i class="fa fa-sticky-note left-icon"></i> Courses
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-container" id="testd">
                           <!-- this part is where the subjects would generate -->

                    </div>
                </div>


                <script type="text/javascript">
                    var dropdown = document.getElementsByClassName("dropdown-btn");
                    var i;

                    for (i = 0; i < dropdown.length; i++) {
                        dropdown[i].addEventListener("click", function () {
                            this.classList.toggle("active");
                            var dropdownContent = this.nextElementSibling;
                            if (dropdownContent.style.display === "block") {
                                dropdownContent.style.display = "none";
                            } else {
                                dropdownContent.style.display = "block";
                            }
                        });
                    }
                </script>

下面的JS

function testing(){

    for(i=0;i<5;i++){
        document.getElementById('testd').innerHTML+=`<button class="dropdown-btn"  ><i class="fa fa-sticky-note left-icon"></i>P${i}
        <i class="fa fa-caret-down"></i>
      </button> <div class="dropdown-container" id="testdd" >
      <a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
       <a onclick="studentlistrr();" style="color:white;">Student list</a>
       <a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
     </div> 
       `
      console.log(i +'<br>')

    }       
}

testing() 

检查下方的浏览器代码 outerHTML

<button class="dropdown-btn active"><i class="fa fa-sticky-note left-icon"></i> Courses
    <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container" id="testd" style="display: block;">

    <button class="dropdown-btn"><i class="fa fa-sticky-note left-icon"></i>P0
        <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-container" id="testdd">
        <a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
        <a onclick="studentlistrr();" style="color:white;">Student list</a>
        <a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
    </div>
    <button class="dropdown-btn"><i class="fa fa-sticky-note left-icon"></i>P1
        <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-container" id="testdd">
        <a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
        <a onclick="studentlistrr();" style="color:white;">Student list</a>
        <a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
    </div>
</div> 

我只想知道我在 outerHTML 部分犯了什么错误，如下所示在侧边栏上不可见。

<a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
<a onclick="studentlistrr();" style="color:white;">Student list</a>
<a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a> 

提前感谢您的帮助。

Answer 1

更新(聊天后):

问题是新按钮的点击事件没有设置。

function testing(){
    // using here a variable, since it fast writing only once to the HTML-DOM
    var newHTML = "";
    for(i=0;i<5;i++){
        // I added a new css-class 'new-buttons' to better select the buttons
        newHTML +=`<button class="dropdown-btn new-buttons">
            <i class="fa fa-sticky-note left-icon"></i>P${i}<i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-container" >
            <a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
            <a onclick="studentlistrr();" style="color:white;">Student list</a>
            <a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
        </div> 
       `
    }
    // here the buttons are added to the DOM
    document.getElementById('testd').innerHTML  += newHTML;
    // Call function that binds DropDown CLick Events
    bindNewButtonsAction();
}

// Function that bind the Events, to the new buttons
function bindNewButtonsAction(){
    // here we retrieve all new-buttons
    var newButtons = document.querySelectorAll(".dropdown-btn.new-buttons");

    // loop through all buttons and add the Click Event.
    for (var i = 0; i < newButtons.length; i++) {
        newButtons[i].addEventListener("click", function () {
            // this code is from original HTML, that is used for the first dropdown button
            this.classList.toggle("active");
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } else {
                dropdownContent.style.display = "block";
            }
        });
    }    
}

This code works and should do the trick. It could be improved abit, if it is used in production.

Important: If the loop for creating the New Buttons run before binding the Button Click Event in your orignial code (line 42), the function call bindNewButtonsAction() can be removed, from the testing() function. Since the code starting at line 42 binds the click event to all buttons with the css-class dropdown-btn, which includes the new Buttons also.