Question

我是新来的。我有一个WordPress网站http://invitroplanttech.se/products/。单击产品菜单项时，子菜单项在短暂显示后消失。此外，单击菜单项会导致重新加载页面

当我点击产品子菜单出现然后去，但是我需要子菜单才会迟到。这是jquery代码：

 <script>
    $(document).ready(function() {

        $('.home').addClass('current-menu-item');
        $('.navigation ul ul li a').hide();
        $(".navigation ul li:nth-child(3)").click(function(){
           $('.navigation ul ul li a').show();
           setTimeout( "jQuery('.navigation ul ul li a').hide();",10000 );  

        });

    });

Answer 1

关于您的代码

您的菜单“闪烁”/只出现片刻的问题是因为您聆听了<li>上的点击，但您发出了<a>事件。当您点击具有有效<a>属性的@href代码时，所有常见浏览器都会加载新页面。

使用您的代码，当您点击此<li>时，您还可以点击<a>，重新加载页面并隐藏您的菜单。

要避免重新加载，您需要通过返回<a>来停止false代码上的活动（请参阅下面的代码）。

JQuery解决方案

我做了a JSFiddle with your HTML code

$(function() {
  $('.navigation li').has('> ul').children('a').click(function(){
    $(this).parent().children('ul').toggle();
    return false;
  });
});

您可以通过CSS

轻松完成子菜单

.navigation li ul { display: none; }
.navigation li:hover ul { display: block; }

这是一种非常简单的方法，不需要将完整的库加载为JQuery，并且可以在所有最近的浏览器上正常工作。

与您的需求的不同之处在于您无法轻松处理“点击”，这就是为什么这个例子在结束时执行此操作。

Answer 2

我遇到与您相同的问题，尝试将'#' in your href tag放入“li”元素中。

  <li id="your_button_id"><a href="#">Item Name</a></li>

在你的javascript添加中，

$("#your_button_id").click(function(e) {
                $('#display_menu1').css({"display":"block"});
                $('#display_menu2').css({"display":"none"});


            });

单击菜单后短暂出现后，子菜单项消失

2 个答案:

关于您的代码

JQuery解决方案

您可以通过CSS