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

Question

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

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";
            }
        });
    }    
}

此代码有效，应该可以解决问题。 如果在生产中使用，它可能会有所改进。

重要提示：如果创建新按钮的循环在您的原始代码（第 42 行）中绑定按钮单击事件之前运行，则可以从testing() function 中删除 function 调用bindNewButtonsAction() 。 由于从第 42 行开始的代码将 click 事件绑定到具有 css-class dropdown-btn的所有按钮，其中还包括新按钮。