jQuery的CSS：下拉互動

Question

我有我的代碼如下問題 - >它似乎並沒有與jQuery的可交互的，但我在JS控制檯沒有得到錯誤：

在這方面的主要下拉標題菜單是路線

當小徑盤旋在它應該表現出以下<li>

的jQuery：

jQuery(document).ready(function() { 
    $(".current a").mouseenter(function(){ 
     $(this).siblings("ul").show(); 
    }).mouseout(function(){ 
     $(this).siblings("ul").hide(); 
    }); 
}); 

CSS：

//Controls the sub li  
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li{ 
     width:185px; 
     padding:5px 0 5px 5px; 
     border-top:1px dotted #424242; 
     border-bottom:0px; 
    } 
//Controls the sub ul 
    #wrapper #contentarea #blue_box .centerblue_txt ul li ul{ 
     border:1px solid red; 
     display:none; 
    } 

HTML： - 這HTML格式由PYROCMS給出我無法控制它

<li class="current"> 
     <a href="">Trials</a> 
     <ul> 
      <li class="first"> 
       <a href="">Link One</a> 
      </li> 
      <li> 
       <a href="">Link Two</a> 
      </li> 
      <li> 
       <a href="">Link Three</a> 
      </li> 
      <li class="last"> 
       <a href="">Link Four</a> 
      </li> 
     </ul> 
    </li> 

Answer 1

下面是你要求給Jess的答案。爲了幫助減少衝突的可能性，您可以創建自己的命名空間。 jQuery本身通常可以用於$，或者您也可以使用實際的字/名稱jQuery代替$。但是你也可以用你想要的任何單詞/名字創建你自己的版本。在你的腳本的開頭命名一個變量，在我的例子中，我用你的名字，像這樣：

var jess = jQuery; 

然後，每當你使用jess它將使用變量值，這是jQuery的。所以：

jess(document).ready() 

等同於：

$(document).ready() 

和：

jQuery(document).ready() 

至於不能夠看到或點擊子菜單，那是因爲你的jQuery的電話只顯示子菜單，當你在父元素上方移動時，意味着只要你的鼠標離開它，你就失去了子菜單。當涉及到菜單和子菜單時，請使用tea_totaler的建議並使用CSS，這對用戶來說更容易和更簡潔。

這是關於命名空間的decent article。

如果您堅持使用jQuery作爲子菜單，您可以使用.toggle函數而不是.show和.hide函數。將其創建爲onClick事件而不是mouseenter和/或mouseOver事件。同樣，你不會得到最大的感覺使用JS你的菜單中，它的推薦使用CSS，但.toggle將是一個很好的替代鼠標事件，我認爲

下面是一個使用簡單，基本爲你fiddle CSS來獲得你想要的結果。

Answer 2

嘿，這可能不是確切地你在問什麼，但這會解決你的問題。

添加到您的CSS &刪除jQuery腳本

​.curre​nt > ul { 
display: none; 
} 

​.current:hover > ul { 
display: block; 
}​ 

因爲即使對於一些模糊的原因，你的jQuery不工作，讓我告訴你，即使你得到它的運行就不會產生預期的結果。