Question

我正在制作一个包含子菜单的菜单。当我点击菜单项时，我使用防止默认，因为它是一个标签，但在子菜单级别我不想阻止默认。我无法弄清楚如何使它工作，所以它不会影响顶层。

<div id="block-menu-block-2">
  <ul class="menu">
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
      <ul class="menu">
        <li><a href="#">2.1</a></li>
        <li><a href="#">2.2</a></li>
        <li><a href="#">2.3</a></li>
        <li><a href="#">2.4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">3</a>
      <ul class="menu">
        <li><a href="#">3.1</a></li>
        <li><a href="#">3.2</a></li>
        <li><a href="#">3.3</a></li>
        <li><a href="#">3.4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li>
      <a href="#">5</a>
    </li>
    <li>
      <a href="#">6</a>
      <ul class="menu">
        <li><a href="#">6.1</a></li>
      </ul>
    </li>
  </ul>  
</div>

这是jQuery

$('#block-menu-block-2 ul li').on("click", function() {
if ($(this).children().is('ul')) {
    if ($(this).find('ul').is(':visible')) {
        $(this).find('ul').hide("blind");
        $(this).removeClass('menuItemSelected');
        $(this).find('ul').removeClass('menuItemSelected');
    } else {
        $(this).parent().find('li ul').hide("blind");
        $(this).parent().find('.menuItemSelected').removeClass('menuItemSelected');
        $(this).find('ul').show("blind");
        $(this).addClass('menuItemSelected');
        $(this).find('ul').addClass('menuItemSelected');
    };
    event.preventDefault()
    }
});

以下是一个可供参考的代码：http://codepen.io/mathiasha/pen/bVpMyo

Answer 1

添加了一些东西。改变了一些东西。无法从手机粘贴到codepen中，因此可能无法正常工作。首先是代码，然后是字墙。

$('#block-menu-block-2 ul li').each (function () { 
    var $this = $(this);
    if ($this.find ('ul:first').length > 0) {
        $this.click (function () {
            if ($this.find ('ul:visible').length > 0) {
                $this.removeClass ('menuItemSelected').find ('ul').removeClass('menuItemSelected').hide ('blind');
            } else {
                $this.parent ().find ('ul li').hide ('blind');
                $this.parent ().find('.menuItemSelected').removeClass  ('menuItemSelected');
                $this.addClass ('menuItemSelected').find ('ul').show ('blind').addClass ('menuItemSelected');
            }
        }); 
    }
});
 $('#block-menu-block-2 > ul > li > a').click (function (e) {
    if ($(this).find ('ul:first').length > 0)
        e.preventDefault ();
});

真正的答案在于只将preventDefault只放在一个标签上，并且只有当它是li标签的直接子节点时，tjat才是ul标签的直接子节点，它是块菜单的直接子节点。见最后3行。

下面的其余代码应该只将click监听器添加到里面带有ul标签的li标签。试图使用链接来限制创建的jQuery对象的数量。可能搞砸了它正在做的事情。你只需要将preventDefault从它所在的位置移除，而不是使用最后3行。

Answer 2

您是否可以在子菜单触发器中添加类，例如.submenu-trigger，然后使用以下jQuery：

$(document).on('click', function(e) {
  if ($(e.target).hasClass('submenu-trigger')) e.preventDefault();
});

Answer 3

忽略所有其他菜单操作并将事件放在<a>标记上，您只需检查<a>是否有兄弟<ul>，是否确实阻止默认

$('#block-menu-block-2 a').click(function(e){
    if( $(this).siblings('ul').length ){
         e.preventDefault();
    }
    // menu manipulation code

});

仅在某些级别上防止默认

3 个答案: