Javascript问题点击下拉菜单上的事件

最近，我接手了一个WordPress网站，使用的主题有很多限制。其中之一是他们的导航菜单。如果你看看这个网站（http://chefkevinwarren.com/），你会看到下拉菜单只显示点击。不是悬停或鼠标悬停。问题的实质是，当你用一个下拉点击一个区域，然后用一个下拉点击另一个按钮时，第一个下拉不会消失。只是，看起来他们在下拉菜单之外点击消失。任何一点都不好。Javascript问题点击下拉菜单上的事件

我找到了代码并将click事件切换到了mouseover事件。认为这将工作，对吧？它确实，但太好了。现在，只要离开主按钮，下拉菜单就会消失。当然，这不是更好。

的代码是SO太久，所以我粘贴它变成引擎收录，如果有人想采取偷看：http://pastebin.com/S4Xg9FQa

来源

2015-03-19 Adam Bell

你可以将它改回到一个点击事件 - 只是为了看看它以前是如何工作的 - 再加上菜单不能在当前状态下使用。 – 2015-03-19 01:33:54

你的代码是这样简单的方法洙配合物。所以，如果你正在寻找一个简单的下拉菜单，然后在这里是一个演示：

DEMO：（修订版）https://jsfiddle.net/9n514f08/2/

JS：（修订版）

var animating = false; 
$(".TREE .NODE").mouseenter(function(){ 
    animating = true; 
    $(this).find(".NODES").slideDown("fast",function(){ 
     animating = false;  
    }); 
}); 

$(".TREE .NODE").mouseleave(function(){ 
    animating = true; 
    $(this).find(".NODES").slideUp("fast",function(){ 
     animating = false;  
    }); 
});

HTML：

<div class="TREE"> 
    <div class="NODE"> 
     <a class="NODE-LINK">ABOUT</a> 
     <div class="NODES"> 
      <div class="NODE"> 
       <a class="NODE-LINK">MY STORY</a> 
      </div> 
      <div class="NODE"> 
       <a class="NODE-LINK">MY STYLE</a> 
      </div> 
      <div class="NODE"> 
       <a class="NODE-LINK">MY STYLE X</a> 
      </div> 
      <div class="NODE"> 
       <a class="NODE-LINK">MY STYLE Y</a> 
      </div> 
     </div> 
    </div><div class="NODE"> 
     <a class="NODE-LINK">SERVICE</a> 
     <div class="NODES"> 
      <div class="NODE"> 
       <a class="NODE-LINK">MY PRICING</a> 
      </div> 
      <div class="NODE"> 
       <a class="NODE-LINK">SERVICES</a> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.TREE{ 
    background: #3f4c6b; 
} 

.TREE > .NODE{ 
    background: #313654; 
    display: inline-block; 
    border-left: 1px solid #000; 
    border-right: 1px solid #3f4c6b; 
    position: relative; 
} 
.TREE > .NODE:FIRST-CHILD{ 
    border-left: 0px solid #000; 
} 
.TREE > .NODE:LAST-CHILD{ 
    border-right: 0px solid #000; 
} 

.TREE > .NODE:HOVER{ 
    background: #3f4c6b; 
} 

.TREE > .NODE a.NODE-LINK{ 
    display: block; 
    padding: 5px 10px 5px 10px; 
    font-size: 13px; 
    font-weight: bold; 
    color: #FFF; 
} 

.TREE > .NODE .NODES{ 
    position: absolute; 
    left: 0px; 
    top: 100%; 
    background: #3f4c6b; 
    padding: 5px; 
    display: none; 
} 

.TREE > .NODE .NODES .NODE a.NODE-LINK{ 
    display: block; 
    white-space: nowrap; 
} 

.TREE > .NODE .NODES .NODE:HOVER{ 
    background: #313654; 
}

如果你想DropMenu确实显示上点击，然后更改

$(".TREE .NODE").mouseenter(function(){ 
     .....

这个

$(".TREE .NODE").click(function(){ 
     .....

来源

2015-03-19 02:15:31

一个非常简单的下拉菜单不会需要JavaScript，或者至少不需要JavaScript来处理动画，例如，您的示例中已经存在问题，因为您可以将鼠标悬停在每个菜单项上多次，并且只是保持动画效果上和下。对于简单的只采用CSS或最小的JS方法。 – 2015-03-19 16:02:16

尽管如果你解决了这个问题，我会满足你的答案 - 不应该将这些代码传播给不了解如何解决问题的人。 – 2015-03-19 16:04:16

@TroyThompson，我说我的代码是如何实现这样的JS动画DropDown菜单的演示。它不适用于复制+粘贴，虽然我更新了它。但你可以继续downVoting。 “伟大”的工作 – 2015-03-19 22:58:05

一个可能速战速决将编辑JavaScript控制你的菜单。

上的光dose.js 785线 - 加“儿童（”下拉滑“。）效果基本show（油门）;

$(this).parent().toggleClass('open').siblings().removeClass('open').children(".dropdown-slide").slideUp(throttle);

测试了这一点，看看它是否适合你。

来源

2015-03-19 15:59:27

Javascript问题点击下拉菜单上的事件

回答

相关问题