子菜单项在单击菜单后短暂出现后消失答案

【问题标题】：Sub-Menu item disappears after appearing briefly on click of menu子菜单项在单击菜单后短暂出现后消失
【发布时间】：2015-06-04 09:38:37
【问题描述】：

我是新来的。我有一个 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 );  

        });

    });

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

关于您的代码

您的菜单“闪烁”/仅出现片刻的问题是因为您听到了对<li> 的点击，但您却让<a> 事件被抛出。当您单击具有有效@href 属性的<a>标签时，所有常见的浏览器都会加载一个新页面。

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

为避免重新加载，您需要通过返回 false 来停止 <a> 标记上的事件（参见下面的代码）。

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，并且在所有最新的浏览器上都可以正常工作。

与你的需求不同的是你不能轻易处理“点击”，这就是为什么这个例子做完了。

【讨论】：

【解决方案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"});


            });

【讨论】：