Question

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

if（！event.target.matches（＆＃39; .dropbtn＆＃39;））{

<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) {

CSS：

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>

Answer 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在哪里。你可以通过

添加它

  <link rel="stylesheet" href="styles.css">

Answer 2

确定。阅读完您的评论后，我明白了您的要求。然后我对“在html中以编程方式扩展下拉列表”进行了一些研究。然后我阅读了以下stackoverflow问题和答案Q1，Q2。这些答案的大多数贡献者都提到在HTML中没有办法做到这一点。提供的代码示例也不起作用。（投诉也可以在评论中看到）。然后我想出了下面的方法来满足你的两个要求。虽然它使用按钮来显示下拉列表，但它可以作为普通的HTML下拉列表。唯一的问题是您必须在按钮下方留出足够的空间，以便Expansion不会影响设计中的其他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>

Answer 3

我有一个CSS3中的解决方案。

perl -nlE '$t=$1if/^task:\s*(.*)/;$s->{$t}+=$1if/^time:\s*(.*)/}{say"$_: $s->{$_}"for sort{$s->{$b}<=>$s->{$a}}keys%$s' task

“z-index”基本上就是那个层面的那个层。

下拉列表打开背景

3 个答案: