Question

我有以下HTML

 <ul class="shopp_categories">
    <li class="current">
      <a class="current" href="link">Gifts For Her</a>
      <ul class="children active" style="display: none;">
        <li><a>Hand Bag Holders</a></li>
      </ul>
    </li>

    <li><a href="link">Gifts ForHim</a></li>
    <li><a href="link">Innovative Gifts</a></li>
    <li><a href="link">Jewellery</a>   
      <ul class="children" style="display: none;">
        <li><a>Alrun Runes</a></li>
      </ul>
    </li>
  </ul>

以及以下jQuery

jQuery(document).ready(function() {
    $('ul ul').hide();
    $('ul.children active').show(); 
    $('ul.children li a').removeAttr("href");
    $('ul.children li > a').mouseover(function(event) {
        $('ul ul').hide('slow');
        $(this).parent().find('ul').toggle('slow');
    });
});

我可以让孩子隐藏，但我不能让他们在鼠标上显示或保持开放，如果他们是活跃的

Answer 1

为防止它们在激活时隐藏，您只需要一个if语句，例如：

if(!$(this).hasClass('active')){ //if it doesn't have the class active
    $(this).hide();
}

关于您提到的第一个问题，当您隐藏元素时，它会获得样式display:none。此时，没有鼠标事件可以触发该元素。您无法单击它，将鼠标悬停在鼠标上，鼠标移开它等等，因为它已从渲染文档中删除。

而且仅供参考，您的语法错误：$('ul.children active')应为$('ul.children.active')。

jQuery Show hide li和ul

1 个答案: