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

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。

---

鉴于您的 fiddle 示例，问题是因为您使用的 CSS 规则不够具体，无法覆盖 li 元素的默认样式。试试这个:

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

Example fiddle