下拉菜单在后台打开答案

【问题标题】：Dropdown opens on background下拉菜单在后台打开
【发布时间】：2017-04-18 18:34:17
【问题描述】：

我刚刚创建了我的拳头下拉菜单，到目前为止一切都很好。下拉菜单打开。下拉按钮下方是容器中的文本和图像。当我单击下拉按钮时，列表位于容器中的文本和图像后面。如何将下拉列表置于前台？

<td bgcolor="white" height="50">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><FONT face="Verdana"    color=#026991 size=2><b>Onze diensten</b></button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><b>Link 1</b></a>
<a href="#"><b>Link 2</b></a>
<a href="#"><b>Link 3</b></a>
<a href="#"><b>Link 4</b></a>
<a href="#"><b>Link 5</b></a>

</div>
</div>




 <script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
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.contains('show');
  }
  }
  }
  }
  </script>

CSS：

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

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: white;
border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
color: #026991;
padding: 12px 16px;
text-decoration: none;
display: block;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: white}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content          container when the user clicks on the dropdown button) */
.show {display:block;}

【问题讨论】：

你能在这里分享你的代码吗？您没有在问题中提到您的代码。我们应该如何回答？
对不起，我已经添加了代码。

标签： dropdown

【解决方案1】：

尝试像这样更改您的 HTML。 `

<td bgcolor="white" height="50">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><FONT face="Verdana"    color=#026991 size=2><b>Onze diensten</b></button>
<div id="myDropdown" class="dropdown-content">
<select>
<option href="#"><b>Link 1</b></option>
<option href="#"><b>Link 2</b></option>
<option href="#"><b>Link 3</b></option>
<option href="#"><b>Link 4</b></option>
<option href="#"><b>Link 5</b></option>
</select>
</div>
</div>




 <script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
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.contains('show');
  }
  }
  }
  }
  </script>

` 另请注意，在您在此处发布的代码中。你还没有提到你的 CSS 在哪里。您可以通过

添加

  &lt;link rel="stylesheet" href="styles.css"&gt;

【讨论】：

下拉列表现在在前台，但是...当我按下下拉按钮时，只有 Link1 显示。我必须按 Link 1，以显示其他行。我希望看到所有行
抱歉，我没办法把它弄好，这对我来说太新了。我遇到的问题：问题 1. 如果我按下按钮，只有 Link 1 显示。我希望在按下按钮时显示所有链接。问题2：如果我选择其中一个链接，则必须打开所选网页，但没有任何反应。这就是我所做的：对不起，我是新手，正在学习......
那么您想要的只是在按下该按钮时显示这 5 个链接？我说的对吗？
我想要两件事： 1. 当按钮被按下时，我想看到 5 个链接（我以后会添加更多）。 2.在5个链接中选择一个，网站必须显示我网站的那个html页面。
所以你不需要下拉菜单？您可以添加一个可以根据按钮单击显示/隐藏的 div。如果我错了纠正我？如果是这样，我可以为您修复此代码

【解决方案2】：

好的。在阅读了您的 cmets 后，我清楚地了解了您的要求。然后我对“在 html 中以编程方式扩展下拉菜单”做了一些研究。然后我阅读了以下stackoverflow问题和答案Q1，Q2。这些答案的大多数贡献者都提到在 HTML 中没有办法做到这一点。提供的代码示例也不起作用。（投诉也可以在 cmets 上看到）。然后我想出了以下方法来满足您的两个要求。虽然它使用按钮来显示下拉菜单，但它可以作为普通的 HTML 下拉菜单使用。唯一的问题是您必须在按钮下方保留足够的空间，以便扩展不会影响设计中的其他 html 元素。

<!DOCTYPE html>
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){



                $("#btn1").click(function(){
                    var val=document.getElementById("btn1").value;

                    if(val=="0"){
                        document.getElementById("btn1").value=1;
                        a

                        jQuery('#content').toggle('show');

                    }
                    else{
                        document.getElementById("btn1").value=0;


                        jQuery('#content').toggle('hide');

                        document.getElementById("btn1").value=0;
                    }

                });





        });
    </script>
</head>
<body>


<div name="drop-down">
<button id="btn1" value="1">Show/Hide</button>
    <div id="content" hidden>
        <button    id="btn11" value="0">Link1</button>
        </br>
        <button   id="btn12" value="0">Link2</button>
        </br>
        <button  id="btn13" value="0">Link3</button>
        </br>
        <button    id="btn14" value="0">Link4</button>
        </br>
    </div>

</div>



<p id="demo"></p>



</body>
</html>

【讨论】：

非常感谢您的帮助......我添加了您的台词。但结果并不好，你可以在这里看到结果：flex-experts.nl/beta 下拉菜单在下面的文本后面打开，而不是在前景中。也许我想要的是不可能的......另一个问题是，我仍然不知道如何使用Link1等打开网站的另一个页面。

【解决方案3】：

我有一个使用 CSS3 的解决方案。

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

“z-index”基本上就是那个东西是哪一层。

【讨论】：