Question

我尝试了一些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操作。

现在我想添加子菜单<a>的默认行为。他们此刻什么都不做。

编辑：我找到了JQuery的“not”位，我试图让它工作（因为我还没有得到令人满意的答案）。我想要的是从滑动子菜单的功能中排除属于类“子菜单”的所有内容。我想出的语法是：

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

但它不起作用。当我单击其中的内容时仍然执行该功能。那么，除了在？

之外，我将如何将上面的代码改写为上述函数以便始终执行

Answer 1

您可以为第一个或任何指定的元素执行此操作：

$(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>

DEMO ：http://jsfiddle.net/Pgm7G/16/

Answer 2

正如我评论的那样，

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

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

取出那个位

Answer 3

我终于发现了一些看起来像我想要的东西。在下面的代码中（在所有“其他”子项已经滑动之后），检查当前菜单项是否包含可见的子项。如果不是它滑了，否则下来。

$(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();
 });

}）;

因为它明确地定位了类“dropdown”的元素（即主菜单项），所以子项的默认行为是不受影响的。（因此，需要this.parent（）来查找子菜单项。）

使用jQuery获取clicked元素

3 个答案: