Toggle（）函数元素没有正确消失

Question

我一直在构建toggle函数，以便在单击主菜单（.li-one）时显示子菜单（.ul-one），然后在另一部分时使子菜单消失页面被选中。单击页面的任何其他部分HOWEVER时工作正常，当您单击另一个菜单功能（.ul-one）时，前一个不会消失 - 只有当您点击不相关的内容（{{{}之外时它才会消失1}} div）。任何人都可以修改，以便子菜单总是消失 - 例如：如果您点击.main-nav，然后element 1 - element 2子菜单将消失？代码如下：

element 1

$(document).ready(function(){
    $(".li-one").hide();
    $('.ul-one') .click(function(event){
        event.stopPropagation();
        $(".li-one",this).slideToggle("medium"); 
    });
    $(".ul-one").on("click", function (event) {
        event.stopPropagation();
    });
});   

.ul-one {
    border:1px black solid;
    width:50%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}

.li-one {
    list-style-type:none;
}

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".li-one").hide();

  $('.ul-one').click(function(event) {
    event.stopPropagation();
    $(".li-one").hide();//hide all
    $(".li-one", this).slideToggle("medium");
  });
  $(".ul-one").on("click", function(event) {
    event.stopPropagation();
  });
});

＆＃13;

.ul-one {
  border: 1px black solid;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.li-one {
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">

  <ul class="ul-one"><a>Element 1</a>
    <li class="li-one"><a>List Element 1.1</a>
    </li>
    <li class="li-one"><a>List Element 1.2</a>
    </li>
    <li class="li-one"><a>List Element 1.3</a>
    </li>
    <li class="li-one"><a>List Element 1.4</a>
    </li>
  </ul>

  <ul class="ul-one"><a>Element 2</a>
    <li class="li-one"><a>List Element 2.1</a>
    </li>
    <li class="li-one"><a>List Element 2.2</a>
    </li>
    <li class="li-one"><a>List Element 2.3</a>
    </li>
    <li class="li-one"><a>List Element 2.4</a>
    </li>
  </ul>

  <ul class="ul-one"><a>Element 3</a>
    <li class="li-one"><a>List Element 3.1</a>
    </li>
    <li class="li-one"><a>List Element 3.2</a>
    </li>
    <li class="li-one"><a>List Element 3.3</a>
    </li>
    <li class="li-one"><a>List Element 3.4</a>
    </li>
  </ul>

  <ul class="ul-one"><a>Element 4</a>
    <li class="li-one"><a>List Element 4.1</a>
    </li>
    <li class="li-one"><a>List Element 4.2</a>
    </li>
    <li class="li-one"><a>List Element 4.3</a>
    </li>
    <li class="li-one"><a>List Element 4.4</a>
    </li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;

1. 隐藏按钮上的所有子菜单，然后显示相应的子菜单

Answer 2

试

 $(".li-one").hide();

 $('.ul-one').click(function(event) {
   event.stopPropagation();
   $('.ul-one').not(this).find('.li-one').slideUp("medium");//slideUp all but the current selected ones

   $(".li-one", this).slideToggle("medium");
 });
 $(".ul-one").on("click", function(event) {
   event.stopPropagation();
 });

https://jsfiddle.net/x57g649h/

Answer 3

请更改

$('.ul-one') .click(function(event){

到

$('.ul-one').click(function(event){

Answer 4

检查点击目标并检查是否存在欲望元素。

$lis = $(".ul-one .li-one").hide();

$("ul.ul-one").on("click", function(event) {
    $lis.not($(this).find('li')).slideUp("medium");
    $(this).find('li').slideToggle("medium");
    event.stopPropagation();
});
$(".main-nav").on("click", function(event) {
    if (!$(event.target).is(".ul-one")) {
        $lis.slideUp("medium");
    }
})

＆＃13;

＆＃13;

$(document).ready(function() {
  $lis = $(".ul-one .li-one").hide();

  $("ul.ul-one").on("click", function(event) {
    $lis.not($(this).find('li')).slideUp("medium");
    $(this).find('li').slideToggle("medium");
    event.stopPropagation();
  });
  $(".main-nav").on("click", function(event) {
    if (!$(event.target).is(".ul-one")) {
      $lis.slideUp("medium");
    }
  })
});

＆＃13;

.ul-one {
  border: 1px black solid;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.li-one {
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
  <ul class="ul-one">
    <a>Element 1</a>
    <li class="li-one"><a>List Element 1.1</a>
    </li>
    <li class="li-one"><a>List Element 1.2</a>
    </li>
    <li class="li-one"><a>List Element 1.3</a>
    </li>
    <li class="li-one"><a>List Element 1.4</a>
    </li>
  </ul>
  <ul class="ul-one">
    <a>Element 2</a>
    <li class="li-one"><a>List Element 2.1</a>
    </li>
    <li class="li-one"><a>List Element 2.2</a>
    </li>
    <li class="li-one"><a>List Element 2.3</a>
    </li>
    <li class="li-one"><a>List Element 2.4</a>
    </li>
  </ul>
  <ul class="ul-one">
    <a>Element 3</a>
    <li class="li-one"><a>List Element 3.1</a>
    </li>
    <li class="li-one"><a>List Element 3.2</a>
    </li>
    <li class="li-one"><a>List Element 3.3</a>
    </li>
    <li class="li-one"><a>List Element 3.4</a>
    </li>
  </ul>
  <ul class="ul-one">
    <a>Element 4</a>
    <li class="li-one"><a>List Element 4.1</a>
    </li>
    <li class="li-one"><a>List Element 4.2</a>
    </li>
    <li class="li-one"><a>List Element 4.3</a>
    </li>
    <li class="li-one"><a>List Element 4.4</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;