jQuery 菜单应该保持打开状态

Posted

技术标签:

【中文标题】jQuery 菜单应该保持打开状态【英文标题】:jQuery menu should stay opem 【发布时间】:2016-08-27 01:22:55 【问题描述】:

我正在运行一个关于 25 个儿童主题的 Wordpress。我找到了一个在鼠标悬停时切换菜单的脚本。我真的很喜欢这个功能。 但我想添加以下选项: 当用户在 parent1 的子页面上时,我希望菜单在这一点上打开,因为默认情况下是在 25 中。你可以在这里看到它: http://johannabaschke.de/impressum/

我现在也想要我找到的脚本:

<script>
  var $ =jQuery.noConflict();
   $(document).ready(function () 
   $('.sub-menu').hide();
   $('.menu-item-has-children').hover(function() 
   $(this).children('.sub-menu').stop().slideToggle(200);
     );
   );
</script>

它在鼠标悬停时切换菜单,但是当点击子页面时,菜单没有打开,如下所示:

http://johannabaschke.de/transeuropa-2015/

我不擅长编码,这就是为什么我只用我擅长的 CSS 修改 WP 主题,但 javascript 不是我的赌注。也许有人有一个简单的想法来解决这个问题?

非常高兴并感谢您的帮助!

54v4nn4h

【问题讨论】:

【参考方案1】:

请尝试这样:

<script>
  var $ =jQuery.noConflict();
   $(document).ready(function () 
   $('.sub-menu').hide();
   $('.menu-item-has-children').click(function() 
   $(this).children('.sub-menu').stop().slideToggle(200);
     );
   );
</script>

【讨论】:

【参考方案2】:

你能不能试试下面的代码:

<script>
    var $ =jQuery.noConflict();
    $(document).ready(function () 
        $('.sub-menu').hide();
        $('.menu-item-has-children').hover(function() 
            $(this).children('.sub-menu').stop().slideToggle(200);
        );

        //code to keep open respective menu open on page load
        $("a[href='"+window.location.href+"']").closest('.sub-menu').stop().slideToggle(200);
   );
</script>

【讨论】:

谢谢,它现在正在做我想做的事。但是还有一个问题,你可以在侧面看到它。现在,当尝试选择打开的父页面的子页面时,菜单会关闭。所以你不能选择姐妹页面。对不起,希望我写的可以理解。

以上是关于jQuery 菜单应该保持打开状态的主要内容,如果未能解决你的问题,请参考以下文章

在内部单击时保持 Bootstrap 下拉菜单打开

子菜单不保持打开状态

Bootstrap 下拉菜单 - 如果搜索栏被聚焦,则保持打开状态

Bootstrap 移动菜单不会保持打开状态

如何保持悬停的菜单项处于打开状态,以便我可以使用 firebug 编辑它的样式?

jQuery 下拉问题(无法保持子菜单可见)