2

我有一个无序列表作为左侧导航，其中有很多链接。大多数列表项都有另一个无序列表作为与之关联的子菜单。但是，一些链接没有子菜单。我想禁用具有子菜单的链接的默认单击行为，以便我可以打开子菜单动画。但在没有子菜单的链接上，我需要链接可点击。我必须这样做的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 没有兄弟姐妹，因此应该单独放置。

4

4 回答 4

4

一种方法是找到那些li具有后代的元素ul，并在其中li找到a并定位那些：

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

JS 小提琴演示。

编辑添加了一个修改后的 jQuery：

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

更有用的 JS Fiddle 演示。

于 2010-12-27T21:31:54.247 回答
3 
 <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>
于 2010-12-27T21:35:09.957 回答
3

最简单的方法：

$("#leftNav ul:first > li > a").not(":only-child").click(function(e){
        e.preventDefault();
});
于 2010-12-27T21:36:53.983 回答
1

我没有足够高的声誉评分来发表评论，但只想说查克的回答对我来说非常有效（除了 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);
       });
});
于 2014-01-23T15:51:37.350 回答