0

我尝试了一些 jQuery，我想弄清楚如何让滑动菜单工作。我在<ul>. <a>我单击的所有 '都会显示一个子菜单。子菜单<ul>有指定给他们的类“子菜单”。

我在完成这项工作方面已经取得了很大进展。现在我要确保的是，当单击子菜单项时，它们的行为与正常情况一样。现在，preventDefault 可以防止这种情况发生。整洁的功能，但我想为子菜单禁用它<a>。

我有以下代码：

$(document).ready(function () {
    $('.dropdown > li').click(function () {
        var $el = $('ul', this); // element to toggle
        $('.dropdown > li > ul').not($el).slideUp();
        $(this).find('.sub-menu ').slideToggle();
    });
    $('.dropdown > li').children().children().click(function (e) {
        return false;
    });
    $(".dropdown > li > a").click(function (e) {
        e.preventDefault();
    });
});

我添加了 preventDefault 以避免主菜单上的正常例程，并且我禁用了子菜单的 slideToggle 操作。

现在我想为 submenu 添加默认行为<a>。他们目前什么都不做。

编辑：我发现了 JQuery 的“不”位，我正试图让它发挥作用（因为我还没有一个令人满意的答案）。我想要的是从滑动子菜单的功能中排除所有属于“子菜单”类的。我想出的语法是：

$('.dropdown > li').not('ul.sub-menu > li > a').click(function() {
}

但它不起作用。当我单击其中的一个时，它仍然执行该功能。那么我将如何改写上面的代码以使上面的函数始终执行，除非在 a 内时？

4

3 回答 3

0

您可以对第一个或任何指定元素执行以下操作：

$(document).ready(function () {
    $('.menu-item').bind('click', function () {
        if($(this).children('ul').length =0){      
            return false;      
        }
       else{
           $(this).children('.sub-menu ').slideToggle();
           return false;
       }    
    });
});

如果HTML 代码是这样的：

<ul class="dropdown">
    <li class="menu-item">
        <a href="#">
      ITEM1
        </a>
    </li>
    <li class="menu-item">
        <a href="#">
      ITEM2
        </a>
        <ul class="sub-menu" >
            <li class="menu-item">
                <a href="#">
                  SUBITEM1
                </a>
            </li>
            <li class="menu-item">
              <a href="#">
                 SUBITEM2
              </a>
            </li>
        </ul>
    </li>
</ul>

演示： http : //jsfiddle.net/Pgm7G/16/

于 2013-05-07T16:15:27.060 回答
0

正如我评论的那样，

$('.dropdown > li').children().children().click(function (e) {
    return false;
});

是选择子菜单链接，return false效果相同e.preventDefault()。

把那一点拿出来

于 2013-05-07T16:32:17.623 回答
0

我终于找到了一些我想要的东西。在下面的代码中（在所有“其他”子项都向上滑动之后）检查当前菜单项是否包含可见的子项。如果不是，则向上滑动，否则向下滑动。

$(function() {
 $('ul.dropdown > li > a').click(function () {
  var $el = $('ul', this);
  $('.dropdown > li > ul').not($el).slideUp();
  if(  $(this).parent().find('.sub-menu ').is(":visible"))
  {$(this).parent().find('.sub-menu ').slideUp();}
  else
  {$(this).parent().find('.sub-menu ').slideDown();}
 });

 $(".dropdown > li > a").click(function (e) {
    e.preventDefault();
 });

});

因为它明确地针对类“下拉菜单”的元素（即主菜单项），所以子项的默认行为未受影响。（因此，需要 this.parent() 来查找子菜单项。）

于 2013-05-08T00:15:26.817 回答