Question

我对jQuery并不是特别高级，但不明白为什么这不起作用。

我有一个可用于悬停的CSS下拉导航，以添加对触摸设备的支持我正试图让子菜单在点击时下拉。

非常感谢任何帮助。

<nav id="navigation">
    <ul>
        <li>
            <a href="index" title="Section 1">Section 1</a>
        </li>
        <li>
            <a title="Section 2">Section 2</a>
            <ul class="sub-menu">
            <li>
                <a href="#" title="Option 1">Option 1</a>
            </li>
            <li>
                <a href="#" title="Option 2">Option 2</a>
            </li>
        </ul>
    </li>
</ul>
</nav>

.touch-show {
    display: block;
    opacity: 1;
    visibility: visible;
}

$(document).ready(function() {
    $('#navigation li a').click(function() {
        event.preventDefault();
        $(this).siblings('.sub-menu').toggleClass('touch-show');
    });
});

https://jsfiddle.net/sLx5hhxq/1/

Answer 1

默认情况下，您只需添加一个CSS规则来隐藏子级别ul元素，然后您的代码将按原样运行。

ul li > ul {
    display: none;
}

Example fiddle

不要忘记你还需要在处理函数的参数列表中包含event。

鉴于您的小提琴示例，问题在于您使用的CSS规则不够具体，无法覆盖li元素的默认样式。试试这个：

#navigation ul li ul.touch-show {
    display: block;
    opacity: 1;
}

Example fiddle

Answer 2

我认为你没有在你的jsfiddle中包含jquery libarary

你可以试试这个：

$(document).ready(function() {

    $("#navigation ul > li > a").on("click", function(e){

        if(!$(this).hasClass("open")) {
          // hide any open menus and remove all other classes
          $("#navigation .sub-menu").slideUp(350);
          $("#navigation a").removeClass("open");

          // open our new menu and add the open class
          $(this).next(".sub-menu").slideDown(350);
          $(this).addClass("open");
        }

        else if($(this).hasClass("open")) {
          $(this).removeClass("open");
          $(this).next(".sub-menu").slideUp(350);
        }
      });

});

https://jsfiddle.net/sLx5hhxq/4/

在jQuery中切换子菜单的可见性

2 个答案: