Question

我试图创建一个有多个按钮的网站，这些按钮会导致出现下拉菜单。每个下拉菜单都有不同的内容。到目前为止，我没有运气。我不确定我做错了什么。我现在正在使用CSS，Java和HTML作为按钮。我在一个单独的文件中有CSS和JavaScript。下面我列出了每个文档中的所有编码。我试过改变;类到id，id到类，名称到不同的东西。第一个按钮打开，无论我点击哪一个，或没有任何反应，没有下拉或任何东西。非常感谢任何想法或帮助。提前谢谢。

HTML文档

<!DOCTYPE HTML>
<html>
<head>
        <title>Title Here</title>
        <meta name="GENERATOR" content="Arachnophilia 4.0">
        <meta name="FORMATTER" content="Arachnophilia 4.0">
        <meta name="keywords" content="content here">
        <meta name="description" content="Contains information on strategies .">
        <link rel="stylesheet" href="/Subcode/CSS/index.css" type="text/css" media="screen">
        <link rel="stylesheet" href="/Subcode/CSS/dropdownbuttons.css" type="text/css" media="screen">
        <script src="Subcode/Java/button.js"></script>
        <script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-4807457957392508.js"></script><script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-4807457957392508.js"></script>
        <link rel="search" href="Subcode/xhtml/search.xml" type="application/opensearchdescription+xml" title="Open Search">
    </head>
    <body background="Images/Background/Finished/bg1.jpg">      
        <div class="sleft">
            <div class="webDD">
                <button onclick="webInfo()" class="webDropbtn">A button</button>
                <div id="webDD" class="webDDCon">
                    <a href="about.html">About the Site</a><br>
                    <a href=""></a><br>
                    <a href=""></a><br> 
                </div>
            </div>
                <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                </div>
            </div>
            <link rel="stylesheet" href="/Subcode/CSS/dropdownbutton.css" type="text/css" media="screen">
                <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                </div>
            </div>  
                <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>  
                <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
                <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">A button</button>
                <div id="myDropdown" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>      
        </div>
        <div class="mbody">

        </div>
        <div class="bottom">

        </div>
    </body>
</html>

CSS Doc

/* Dropdown Button A */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

JavaScript Doc

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

这是一个有效的解决方案。就像@MichaelCoker所说，其中一个问题是为多个元素重用相同的ID。

以下是我所做的更改：

每个下拉列表的唯一ID（myDropdown1等）
将this传递到onclick函数以区分元素

function myFunction(btn) {
    btn.nextSibling.nextSibling.classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Dropdown Button A */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

<!DOCTYPE HTML>
<html>
<head>
        <title>Title Here</title>
        <meta name="GENERATOR" content="Arachnophilia 4.0">
        <meta name="FORMATTER" content="Arachnophilia 4.0">
        <meta name="keywords" content="content here">
        <meta name="description" content="Contains information on strategies .">
        <link rel="stylesheet" href="/Subcode/CSS/index.css" type="text/css" media="screen">
        <link rel="stylesheet" href="/Subcode/CSS/dropdownbuttons.css" type="text/css" media="screen">
        <script src="Subcode/Java/button.js"></script>
        <script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-4807457957392508.js"></script><script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-4807457957392508.js"></script>
        <link rel="search" href="Subcode/xhtml/search.xml" type="application/opensearchdescription+xml" title="Open Search">
    </head>
    <body background="Images/Background/Finished/bg1.jpg">      
        <div class="sleft">
            <div class="webDD">
                <button onclick="webInfo()" class="webDropbtn">A button</button>
                <div id="webDD" class="webDDCon">
                    <a href="about.html">About the Site</a><br>
                    <a href=""></a><br>
                    <a href=""></a><br> 
                </div>
            </div>
                <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown1" class="dropdown-content">
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                </div>
            </div>
            <link rel="stylesheet" href="/Subcode/CSS/dropdownbutton.css" type="text/css" media="screen">
                <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown2" class="dropdown-content">
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                <a href=""></a><br>
                </div>
            </div>  
                <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown3" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>  
                <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown4" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
                <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown5" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
            <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown6" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
            <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown7" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>
            <div class="dropdown">
                <button onclick="myFunction(this)" class="dropbtn">A button</button>
                <div id="myDropdown8" class="dropdown-content">
                <a href=""></a><br>
                </div>
            </div>      
        </div>
        <div class="mbody">

        </div>
        <div class="bottom">

        </div>
    </body>
</html>

请注意，要使此代码在IE中运行，您需要使用.msMatchesSelector()代替.matches()。

需要有关下拉菜单的帮助

1 个答案: