Javascript 单击锚定后，如何瞄准没有任何ULs的LI

我有一个简单的菜单，在锚中有一个箭头。我有一个jQuery，它添加了一个类来显示单击时的箭头。但是，如果单击的li a没有子菜单，我需要它在单击时不“显示箭头”。下面是我的菜单的一个粗略示例：

<ul id="menu">
    <li><a href="#">TopLevel_LinkOne <img src="img/down-carat.png" class="down-carat"></a></li>
    <li><a href="#">TopLevel_LinkTwo <img src="img/down-carat.png" class="down-carat"></a></li>
    <li><a href="#">TopLevel_LinkThree <img src="img/down-carat.png" class="down-carat"></a>
        <ul class="sub-menu">
            <li><a href="#">Submenu Link One <img src="img/down-carat.png" class="down-carat"></a></li>
            <li><a href="#">Submenu Link Two <img src="img/down-carat.png" class="down-carat"></a></li>
            <li><a href="#">Submenu Link Three <img src="img/down-carat.png" class="down-carat"></a></li>        
        </ul>   
    </li>        
</ul>

试试看

完整代码：

$('#menu li a').click(function() {
    $('ul li a').removeClass('show-arrow'); // Remove any previous arrows
    if($(this).closest('li').find('ul.sub-menu').length) {
      $(this).addClass('show-arrow'); // Show the arrow image
    }
 });

试试这个：

 if($(this).parent().find('ul').length) {
      $(this).addClass('show-arrow'); // Show the arrow image
 }

---

如果您的HTML允许您做出某些假设，那么您可以非常轻松地做到这一点

例如，如果安全地假设列表项只包含“一个

元素”或“一个

元素后跟一个子菜单”，则可以执行以下操作：

if( this.parentNode.children.length > 1)

但如果您想要健壮性，您可以这样做：

if( $("ul",this.parentNode).length)

这样试试

JQUERY代码：

$('#menu li a').click(function() {
    $('ul li a').removeClass('show-arrow'); // Remove any previous arrows
       if($(this).siblings('ul').length) {
          $(this).addClass('show-arrow'); // Show the arrow image
       }
});    

现场演示：

---

快乐编码：）

这一款可能适合您：

$('#menu > li').click(function () {
    $('ul li a').removeClass('show-arrow');
    $(this).has('ul.sub-menu').addClass('show-arrow');
}

您可以相应地修改它以满足您的需要。谢谢

$('#menu li a').click(function() {
    $('ul li a').removeClass('show-arrow'); // Remove any previous arrows
       if($(this).siblings('ul').length) {
          $(this).addClass('show-arrow'); // Show the arrow image
       }
});    

$('#menu > li').click(function () {
    $('ul li a').removeClass('show-arrow');
    $(this).has('ul.sub-menu').addClass('show-arrow');
}