Jquery点击显示/隐藏子菜单不显示

Question

我有一个水平菜单，带有水平子菜单和子子菜单。 单击时应出现子菜单并保持可见。如果我从子菜单转到一个页面，子子菜单应该是可见的。 我在这个网站和网络上搜索了答案。

更新

感谢您提供的答案，我已经修改了脚本，这使我朝着正确的方向前进，并在 stackoverflow 上找到了一个示例。 点击适用于平板电脑 eo，对于我喜欢悬停的屏幕。我试图将脚本与悬停功能结合起来，有效。

    $('#menu li').hover(function() {
    $(this).find('ul').show();
     },
     function() {
    $(this).find('ul').hide();
   });

尝试像这样组合悬停和单击，但悬停不起作用。 我做错了什么？

$(document).ready(function(){
$('.sub').hide();
$('#menu li a').on('click hover ', function(event){
if ($(this).next('ul.sub').children().length !== 0) {
event.preventDefault();
}
$(this).siblings('.sub').slideToggle('slow');
});
});

css

.sub{display:none;}

HTML

<ul id="menu">
 <li><a href="item.php">Item</a></li>
 <li><a href="item1.php">item1</a>
   <ul class="sub">
   <li><a href="subitem1">subitem1</li>
        <ul class="subsub">
          <li> <a href="subsub1.php">subsub1</a></li>
          <li> <a href="subsub2.php">subsub2</a></li>
          <li> <a href="subsub3.php">subsub3</a></li>
        </ul></li>
   <li><a href="subitem2.php">subitem2</a></li>
</ul></li>
</ul>

jQuery

 //Hide all the sub menus
 $('.sub').hide();

 $('#menu li a').click(function(event){
if ($(this).next('ul.sub').children().length !== 0) {

}
 $(this).siblings('.sub').slideToggle('slow');
});
});

Answer 1

假设您要访问 item1.php 的子菜单。 jQuery 看起来像这样

$(function() {
    $('a', '#menu').click(function(e) {
        e.preventDefault();
        $(this).parent().find('.sub').show();
    });
});

这里是my jsFiddle

更新 1：在下面的 cmets 中提到，用户无法导航菜单内的实际链接。要解决此问题，请向您希望允许更改浏览器页面的链接添加一个类（我将使用 pageChange）。要实现这一点，请使用我上面的代码并将其绑定到您指定的类。您还需要将类添加到链接标签中。

$(function() {
    $('a', '#menu').click(function(e) {
        if ($(this).hasClass('pageChange') === true) {
            return;
        }
        e.preventDefault();
        $(this).parent().find('.sub').show();
    });
});

这是上面代码的新 jsFiddle：http://jsfiddle.net/pSKYk/3/

Answer 2

您的直接问题是设置指向显示子菜单的菜单选项的链接。当他们被点击时，它会试图把你带出页面。

这是一个可以正常工作的 jsfiddle（据我所知）。我还添加了切换功能，因此再次单击时会隐藏菜单：http://jsfiddle.net/9gcnm/1/

---

也，只是让你知道

$(function() {

});

是

的 jQuery 简写

$(document).ready(function(){

});