单击防止父级与子级的默认设置 [英] On click prevent default on parent with childern

问题描述

在我的响应式下拉菜单中，我希望在单击菜单项时能够执行以下操作:

On my responsive dropdown menu I want to be able to do the following when a menu item is clicked:

• 如果链接没有子链接，则功能正常
• 如果父链接有子链接，则默认阻止父链接并显示子链接
• 父链接和子链接现在正常运行(即在单击以显示子项后没有 preventDefault)

我完成的(非功能性)JQuery 如下，这是我的Fiddle(已编辑 - 简化了示例)

The (non-functining) JQuery I've done is below and here is my Fiddle (Edited - simplified the example)

var parentWithChildren = $('region-responsive-nav ul');
//var parentWithChildren = $('region-responsive-nav ul').children('has:ul').length > 0 );

$('.region-responsive-nav ul ul').hide();
//prevent default once
if (parentWithChildren.children('has:ul').length > 0 ) {
      $('.region-responsive-nav ul li').one(function(event) {
        $(this).children('ul').slideToggle();
        event.preventDefault();
      });
}else{
    //open link immediately 
}

有关标记，请参见下文.(由于在我的编辑中进行了简化.请注意，它在同一个

中有两个

，对此我无能为力.

See below for the markup. (Since simplified in my edit. Please note that it has two <ul> inside the same <li> and there is not much I can do about this.

<nav class="region-responsive-nav">
    <ul>
        <li>One</li>
        <li>Two
            <ul class="sub">
                <li>Two A</li>
                <li>Two B</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>Three</li>
        <li>Four
            <ul>
                <li>Four A</li>
                <li>Four B</li>
            </ul>
        </li>   
    </ul>
</nav>

我认为我很接近(至少在概念上)所以任何指针都会受到赞赏.

I think I'm fairly close (at least in concept) so ainy pointers would be appreciated.

提前致谢

推荐答案

试试这个事件处理程序来处理父

• 的 onclick:

  Try this event handler to handle onclick for the parent <li>'s:

  $('.region-responsive-nav ul li').on('click', function(event) {
      // Check if the <li> has hidden children 
      if ($(this).children('ul:not(:visible)').length > 0) {
          event.preventDefault();
          // Display children
      } else {
          // Normal behaviour
      }
  });
  

  这将检查

• 是否有任何子
  元素在点击时隐藏，您可以相应地处理.

  This will check whether the <li> has any child <ul> elements that are hidden when it's clicked and you can handle that accordingly.

  请记住，此事件处理程序也将绑定到子

  • .如果您只希望代码中的第一组
  • 具有此行为，请使用 这个选择器:$('.region-responsive-nav > ul > li').

    Keep in mind this event handler will bind to the children <li>'s too. If you only want this behaviour for the first set of <li>'s in your code, use this selector instead: $('.region-responsive-nav > ul > li').

    更新:

    JSFiddle 根据您更新的 JSFiddle 演示此解决方案:https://jsfiddle.net/tadhbb3a/2/

    JSFiddle demonstrating this solution based on your updated JSFiddle: https://jsfiddle.net/tadhbb3a/2/

    我已将所有列表项制作成链接，因此您可以看到带有子项的链接只显示子项，而不会将用户发送到链接，但没有子项的链接作为普通链接工作.

    I've made all the list items into links so you can see that the links with children just show the children without sending the user to the link, but those without children work as normal links.

    此外，正如您在其中一条评论中所阐明的那样，您希望具有可见子项的父链接已作为普通链接工作，因此也添加了该链接.

    Also as you've clarified in one of your comments you want the parent links that have children visible already to work as normal links, so that's added too.

    这篇关于单击防止父级与子级的默认设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！