Question

我正在尝试使用下拉导航系统，但是，我无法同时打开这两个下拉菜单。尽管看了几个小时，我似乎无法找到实现这一目标的方法。

非常感谢任何帮助。

我的HTML;

<head>
    <title>Home</title>
    <link type="text/css" href="F:\Revision Website\Styling\Stylesheet.css" rel="stylesheet"/>
    <script type="text/javascript" src="F:\Revision Website\Scripts\Main.js"></script>
</head>

<body>

    <header>
        <h1>Home</h1>
    </header>

    <nav>
        <div class="navbar">
            <a href="F:\Revision Website\Webpages\Index.html">Home</a>

            <button class="dropbtn" onclick="showFunction()">Computing</button>
                <div class="dropdownContainer" id="content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>

            <button class="dropbtn" onclick="showFunction()">Physics</button>
                <div class="dropdownContainer" id="content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
        </div>
    </nav>

    <article>
        <p></p>
    </article>

</body>

我的JS;

function showFunction() {
    document.getElementById("content").classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdownContainer");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

修改

以下代码＆＃34;工作＆＃34;但是，只能通过使用内部JS，我宁愿不使用。

var dropdown = document.getElementsByClassName("dropbtn");
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";
    }
});
}

Answer 1

请使用

     <button class="dropbtn" onclick="showFunction(this)">Physics</button>

和javascript

   function showFunction(ele) {
    $(ele).find('#content').classList.toggle("show");
   }

我认为这会有所帮助

Sidenav Dropdowns Conflicting

1 个答案: