Question

当我点击按钮外部时，我的下拉列表无法关闭，上面的功能使下拉按钮完全正常工作。页面底部的函数是我试图在它渲染脚本中的其他函数无法使用的时候开始工作，如果我删除它的工作。下面代码中的dropwdown html就是一个例子。

        //this is how the dropdown looks like got it from //http://www.w3schools.com/w3css/w3css_dropdowns.asp
         <div class="w3-dropdown-click">
           <button onclick="myFunction()" class="w3-btn">ClickMe</button>
            <div id="Demo" class="w3-dropdown-content w3-card">
   /*some example links*/
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
           </div>
         </div>     
    // I use two of these on my page


    <script>          
    //this functions open and closes my dropdown when clicked 
       function myFunction(event) {
     //opens the selected dropdownlist
         document.getElementById("Demo").classList.toggle("w3-show");
     //closes the other dropdownlist
          document.getElementById("Demo2").classList.remove("w3-show");
          event.stopPropagation();
       }

          //this functions open and closes my other dropdown when clicked 
      function myFunction2(event) {
                 //opens the selected dropdownlist
         document.getElementById("Demo2").classList.toggle("w3-show");
                 //closes the other dropdownlist
         document.getElementById("Demo").classList.remove("w3-show");
         event.stopPropagation();
       }

    // the funtion im trying to get to work it should close the dropdown when Im clicking outsid of the dropdown buttons 
             $(":not(#Demo2)").click( function(){
               document.getElementById("Demo").classList.remove("w3-show");
               document.getElementById("Demo2").classList.remove("w3-show");
              });
              </script>

Answer 1

让我们试试这种方法吧。

构建HTML以执行单击甚至客户端。使用ID编写存储过程

<强> HTML

<div class="top40">
    <button type="button" class="btn" data-toggle="collapse" data-target="#demo">
        Collapse Button
    </button>
    <ul id="demo"  class="collapse">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
</div>

<强> CSS

.top40{
    margin-top:40px;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.collapse {
    display: none;
}
.collapse.in {
    display: block;
}

JQUERY ＆lt; - 我假设您在文档中引用了JQuery

$(document).on('click',function(){
    $('.collapse').toggleClass('in');
})

您点击文档的任何地方都会触发点击事件并切换in类，该类将隐藏并显示在+1 click

上

这是一个有效的MockBehaviour to Strict

Answer 2

window.addEventListener('mouseup',function(event){
        var pol = document.getElementById('Demo1');
        if(event.target != pol && event.target.parentNode != pol){
            document.getElementById("Demo").classList.remove("w3-show");
            document.getElementById("Demo2").classList.remove("w3-show");
          
        }
  });

当我点击外面时，无法让我的下拉列表关闭

2 个答案: