Question

我有一个恼人的问题，我有一个切换下拉列表的按钮，我的意图是再次点击按钮时隐藏div，切换实现，并在外部点击时隐藏下拉列表为什么我当前的jquery。但是当点击div本身时，它会向上滑动。

HTML＆gt;

<div class="navPanel">

<!-- NAV -->

<nav>

<ul id="navBar"> 

<div class="dynamicNav">

<div class="menu1Container">
<li class="menu1">Books

<!-- DropDown1-->
<div id="dropdownContainer-1"> 

</div>
</li>
</div>
</div>

</ul>

</nav>

Jquery＆gt;

$(function(){
 $(".menu1").click(function(){
   $("#dropdownContainer-1").slideToggle(90);
});

 $(document).click(function(event) {
if (!$(event.target).is(".menu1") && !$(event.target).is(".menu1")) {
     $("#dropdownContainer-1").slideUp(90); //make all inactive
   }
    });

});

明显的问题是事件目标，我尝试使用类似的方法 - ＆gt;

$(document).click(function(e) {
 var target = e.target;
 if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
 $('#dropdownContainer-1').slideUp(90);
 }
  });

如果你能帮我解决这个问题，我会很感激的！

Answer 1

您可以使用：

$(event.target).closest(".menu1").length == 0

$(".menu1").click(function(e){
  e.stopPropagation();   // avoid to propagate to document click
  if ($(event.target).is(".menu1")) {
    $("#dropdownContainer-1").slideToggle(90);
    console.log('Menu1 toggled clicking menu1');
  }
});

$(document).click(function(event) {
  if ($(event.target).closest(".menu1").length == 0 &&
     $("#dropdownContainer-1").is(':visible')) {
    // if not inside area of menu1
    $("#dropdownContainer-1").slideUp(90); //make all inactive
    console.log('Menu1 closed clicking outside menu1');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="navPanel">

    <!-- NAV -->

    <nav>

        <ul id="navBar">

            <div class="dynamicNav">

                <div class="menu1Container" style="border-style: dotted;width:50%;">
                    <li class="menu1">Books

                        <!-- DropDown1-->
                        <div id="dropdownContainer-1">
                            <p>1111</p>
                            <p>1111</p>
                            <p>1111</p>
                            <p>1111</p>
                            <p>1111</p>
                        </div>
                    </li>
                </div>
            </div>

        </ul>

    </nav>
</div>

当在切换显示的div中单击时，它会切换

1 个答案: