Question

我有一个无序列表作为左侧导航，其中包含相当多的链接。大多数列表项都有另一个无序列表作为与它们关联的子菜单。但是，一些链接没有子菜单。我想禁用具有子菜单的链接上的默认点击行为，以便我可以打开子菜单动画。但在没有子菜单的链接上我需要点击链接。我必须这样做的javascript是：

$(function(){
    if($("#leftNav ul:first > li > a").siblings().size() > 0){
        $("#leftNav ul:first > li > a").click(function(e){
            e.preventDefault();
        });
    }

问题是这会禁用所有链接的默认点击行为，而不仅仅是兄弟姐妹的链接。左侧导航的html看起来像这样

<div id="leftNav">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li><a href="#">Submenu Link 1</a></li>
                <li><a href="#">Submenu Link 2</a></li>
                <li><a href="#">Submenu Link 3</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
     </ul>
</div>

因此需要在链接1上删除点击行为，因为它有<ul>作为兄弟。链接2没有兄弟姐妹所以应该单独留下。

Answer 1

执行此操作的一种方法是查找具有后代li的{{1}}元素，并在ul中找到li并定位：

JS Fiddle demo

编辑添加修订的jQuery：

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });

Slightly more useful JS Fiddle demo

Answer 2

 <script type="text/javascript">
  $(function () {
      $("#leftNav ul:first > li > a").each(function (a, b) {
          var t = $(b);
          //alert(t.siblings().size() );
          if (t.siblings().size() > 0) {
              t.click(function (e) {
                  e.preventDefault();
              });
          }
      });
  });
 </script>

Answer 3

最简单的方法：

$("#leftNav ul:first > li > a").not(":only-child").click(function(e){
        e.preventDefault();
});

Answer 4

我没有足够高的声誉评分来评论，但只是想说Chuck的答案对我来说非常合适（除了FIREFOX？）。在打开你点击的菜单之前，我的菜单还会隐藏其他打开的菜单 - 这是我使用的代码：

jQuery(document).ready(function($) { 
     $('ul.menu li ul.sub-menu').hide(); //Hide children by default

     $("ul.menu:first > li > a").not(":only-child").click(function(){
            event.preventDefault();
            $(this).parent().siblings().children('ul.menu li ul.sub-menu').css('display','none');
            $(this).siblings('.sub-menu').slideToggle(800);
       });
});

如果元素有兄弟姐妹，该怎么做

4 个答案: