Toggle() 函数元素没有正确消失

Question

我一直在构建一个 toggle 函数来在单击主菜单 (.ul-one) 时显示子菜单 (.li-one)，然后在单击另一个菜单时让子菜单消失页面的一部分被选中。单击页面的任何其他部分时工作正常 HOWEVER，当您单击另一个菜单功能 (.ul-one) 时，前一个不会消失 - 它只会在您单击不相关的内容（在 [= 之外）时消失18=] div)。任何人都可以修改以使子菜单始终消失吗？例如：如果您单击 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;
}

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

Answer 1

$(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();
  });
});

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

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

单击按钮时隐藏所有子菜单，然后显示相应的子菜单

Answer 2

请更改

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

至

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

Answer 3

尝试

 $(".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 4

检查点击目标，检查是否存在desire元素

$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");
    }
})

$(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");
    }
  })
});

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

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

Toggle() 函数元素没有正确消失

Toggle() function elements not disappearing properly

html

css

jquery

toggle