不知道爲什麼我的jQuery代碼不工作（與CSS作品）

嘿你們大家一直有這個問題，它不會消失....不知道爲什麼我的jQuery代碼不工作（與CSS作品）

http://www.willruppelglass.com/

我有3個菜單項目家，畫廊和信息。如果將鼠標懸停在圖庫或信息上，則會出現一個子菜單。然而，當我轉到懸停在它消失的時候了子菜單:(我想能夠將鼠標懸停在子菜單，我不知道爲什麼這個代碼是不工作...

$(".galleryNavToggle").on("mouseenter mouseleave", function(event){ 
    var headNavGal = $("#headerNavGallery"); 
    if(event.type === "mouseenter"){ 
     headNavGal.show(); 
    }else if(event.type ==="mouseleave" && 
      ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) || 
      $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){ 
     headNavGal.hide(); 
    } 
}); 
$("#headerNavGallery").on("mouseleave", function(event){ 
    var headNavGal = $(this); 
    if(event.type ==="mouseleave"){ 
     headNavGal.hide(); 
    } 
}); 


$(".galleryNavInfoToggle").on("mouseenter mouseleave", function(event){ 
    var headNavGal = $("#headerNavInfo"); 
    if(event.type === "mouseenter"){ 
     headNavGal.show(); 
    }else if(event.type ==="mouseleave" && 
      ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) || 
      $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){ 
     headNavGal.hide(); 
    } 
}); 
$("#headerNavInfo").on("mouseleave", function(event){ 
    var headNavGal = $(this); 
    if(event.type ==="mouseleave"){ 
     headNavGal.hide(); 
    } 
});

這裏是我的HTML

<div class="headerWrapper"> 
    <div class="headerNav"> 
    <ul> 
    <li><a href="index.php?action=view">Home</a></li> 
    <li><a href="#" class='galleryNavToggle'>Gallery</a></li> 
    <li><a href="#" class='galleryNavInfoToggle'>Info</a></li> 
    </ul> 
    </div><!--headerNav--> 
    </div><!--headerWrapper--> 

<div class="contentWrapper"> 
<div class="content" id="content"> 
<div class="topContent"> 
<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

<div class="headerNavInfo" id="headerNavInfo" style="display:none;"> 
<ul> 
<li><a href="#">William Ruppel</a></li> 
<li><a href="#">CV</a></li> 
<li><a href="#">Artist Bio</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div><!--headerNavInfo--> 
</div><!--topContent--> 
</div><!--contentWrapper-->

任何幫助或在正確的方向的一個點，將不勝感激。在先進

感謝，

來源

2012-03-08 user979331

是的，他們的子菜單需要是headerWrapper – user979331 2012-03-08 20:52:23

外面有請人幫忙在做你的工作，並要求別人做你的工作在一線之間爲你。這個問題（相當於「請爲我調試我的代碼」）覺得它在這一行的錯誤一面。 – machineghost 2012-03-08 20:54:20

我可以對代碼進行總結，並詢問如何讓某些東西在div外工作，但我正在繪製一個空白 – user979331 2012-03-08 20:57:25

我認爲你應該做的是徹底刪除你的mouseleave事件。相反，在MouseEnter事件隱藏兩個子菜單，如下所示：

$(".galleryNavToggle").on("mouseenter", function (event) { 
     $('#headerNavGallery, #headerNavInfo').hide(); 
     $("#headerNavGallery").show(); 
    }); 

    $(".galleryNavInfoToggle").on("mouseenter", function (event) { 
     $('#headerNavGallery, #headerNavInfo').hide(); 
     $("#headerNavInfo").show(); 
    });

來源

2012-03-08 21:09:26 zgood

我將在稍後嘗試此操作。但謝謝:) – user979331 2012-03-08 21:12:58

哦，男人，這個作品像一個魅力..感謝zgood你真棒 – user979331 2012-03-08 21:19:25

看來，問題的發生是因爲要將鼠標懸停在子菜單上，必須將鼠標移出觸發器。這是觸發mouseleave事件並導致子菜單關閉。

對於下拉菜單，我喜歡將子菜單放在頂層元素的內部，而不是讓它們成爲兩個單獨的元素。這樣，當你懸停鼠標的子菜單時，技術上仍然在觸發事件的父元素內。

例如

<ul id="nav"> 
    <li id="gallery"> 
     Gallery 
     <ul class="subnav"> 
      <li>Subnav 1</li> 
      <li>Subnav 2</li> 
      <li>Subnav 3</li> 
     </ul> 
    </li> 
    <li id="info"> 
     Info 
     <ul class="subnav"> 
      <li>Subnav 1</li> 
      <li>Subnav 2</li> 
      <li>Subnav 3</li> 
     </ul> 
    </li> 
</ul>

所以在你的CSS，你可以有

.subnav { 
    display: none; 
}

然後在jQuery的（甚至CSS），您可以設置subnav在鼠標懸停顯示塊。因爲subnav存在於菜單項內，所以在你完全離開該區域之前，mouseleave不會被觸發。

來源

2012-03-08 21:00:18

不知道爲什麼我的jQuery代碼不工作（與CSS作品）

回答

相關問題