Question

<li class="submenuList item-with-ul">
  <a href="#">Blalab</a>
  <ul class="sub-nav" style="display: none;">
    <li><a href="#">Highlights</a></li>
    <li><a href="#">Invited</a></li>
    <li><a href="#">Talks</a></li>
  </ul>
</li>



$('.item-with-ul').on('click', function(){
      alert('work');//works
      $(this).siblings('.sub-nav').addClass('block');
      $('.block').removeClass('block');
 });

.block{
   display:block!important;
}

真的希望子菜单在主导航时悬停后保持打开状态，但谷歌搜索了一段时间后，似乎没有办法做到这一点。想到点击可能有效。如果点击主导航，它将打开子菜单，直到用户点击另一个导航项目。

但无法在<li class="sub-nav">中显示阻止。兄弟姐妹（），最近（），find（）无助于添加类块。不知道为什么..

Answer 1

使用show()和hide()代替其他课程。这是编辑过的代码：

＆＃13;

$('.item-with-ul').on('click', function(){
      $('.sub-nav').hide();
      $('.sub-nav', $(this)).show();
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <ul>
      <li class="submenuList item-with-ul">
        <a href="#">Blalab</a>
        <ul class="sub-nav" style="display: none;">
          <li><a href="#">Highlights</a></li>
          <li><a href="#">Invited</a></li>
          <li><a href="#">Talks</a></li>
        </ul>
      </li>
      <li class="submenuList item-with-ul">
        <a href="#">Another Bla</a>
        <ul class="sub-nav" style="display: none;">
          <li><a href="#">Highlights</a></li>
          <li><a href="#">Invited</a></li>
          <li><a href="#">Talks</a></li>
        </ul>
      </li>
   </ul>

＆＃13;

Answer 2

你可以在没有jQuery的情况下通过在父级＆＃34;上设置子元素的显示属性来做到这一点：hover＆＃34;并通过在儿童悬停上应用相同的样式。

jsfiddle例子。

http://jsfiddle.net/unbeq63p/1/

<ul>
<li class="item">Parent
    <ul class="submenu">
        <li>Child</li>
        <li>Child</li>
    </ul>
</li>
<li class="item">Parent
    <ul class="submenu">
        <li>Child</li>
        <li>Child</li>
    </ul>
</li>
</ul>

 .submenu{
    display:none;
}
.item:hover > .submenu {
    display:block;
}
.submenu:hover{
    display:block;
}

如何设置子菜单保持打开状态？

2 个答案: