Question

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

更新

我修改了脚本，感谢您给出的答案，这使我朝着正确的方向前进，并在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：在下面的评论中提到，用户无法浏览菜单中的实际链接。要解决此问题，请将类（我将使用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(){

});

单击显示/隐藏子菜单上的Jquery未显示

2 个答案: