這是最好的方法嗎？

我有一個導航欄有兩個下拉列表（作爲嵌套ul的）。我試圖切換subnavs時，其父母被點擊。或者當另一個父母被點擊時隱藏一個subnav。這裏的標記：這是最好的方法嗎？

<div id="nav-bar"> 
    <a href="#">A link</a> | 
    <ul> 
    <li id="feedback"> 
     <a href="javascript:void(0);">Feedback</a> 
     <ul class="subnav"> 
     <li><a href="#">Give us feedback</a></li> 
     </ul> 
    </li> 
    </ul> | 
    <a href="#">Another link</a> | 
    <ul> 
    <li id="location"> 
     <a href="javascript:void(0);">Pick your location</a> 
     <ul class="subnav"> 
     <li><a href="#">Los Angeles</a></li> 
     <li><a href="#">New York</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

，代碼：

//hide the subnavs and give them a little down arrow 
$('ul.subnav').hide().parent().append('<small>&#9660;</small>'); 

// show its subnav when clicked 
$('#nav-bar ul li').click(function() { 
    var subnav = $(this).children('ul.subnav'); 
    // hide the other's subnav if it's visible 
    if ($(this).attr('id') == 'location') { 
    subnav.toggle(); 
    $('li#feedback').children('ul.subnav').hide(); 
    } else { 
    subnav.toggle(); 
    $('li#location').children('ul.subnav').hide(); 
    } 
});

仍然是一個新手，JS和jQuery，我想知道是否有做到我想要一個更簡潔的方式做以上。

編輯：一個更好的問題是，有沒有辦法做到這一點，而不必明確地給李的ID？

來源

2010-02-22 farkenfooken

你應該說你正在努力達到的目的..而不是讓人們試圖從你的代碼中找出它。我們怎麼知道你想要做的是你的代碼是什麼？ – Layke 2010-02-22 20:19:19

我試圖切換subnavs，當其父母被點擊。或者當另一個父母被點擊時隱藏一個subnav。 – farkenfooken 2010-02-22 20:20:31

Heed Laykes。你需要提供你想要做的事情的解釋，特別是你不喜歡你目前如何做的事情。 – 2010-02-22 20:20:58

一個更好的格式將是這樣爲你的HTML：

<ul id="nav-bar"> 
    <li><a href="#">A link</a> |</li> 
    <li> 
    <a href="#">Feedback</a> | 
    <ul class="subnav"> 
     <li><a href="#">Give us feedback</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Another link</a> |</li> 
    <li> 
    <a href="#">Pick your location</a> | 
    <ul class="subnav"> 
     <li><a href="#">Los Angeles</a></li> 
     <li><a href="#">New York</a></li> 
    </ul> 
    </li> 
</ul>

然後jQuery代碼應該是這樣的：

$(function(){ 
    var $nav = $("#nav-bar"), 
     $subnav = $nav.find("ul.subnav").hide(); 

    $nav.children('li:has(ul.subnav)').click(function(e){ 
    e.preventDefault(); 
    var $sub = $(this).children('ul.subnav').toggle(); 
    $subnav.not($sub).hide(); 
    }) 
})

來源

2010-02-22 20:26:41

這更多是我想要做的。很棒。我知道這是要求你解釋很多，但你這樣做的原因是什麼？我做這件事的方式不理想，爲什麼？ – farkenfooken 2010-02-22 20:31:38

@fenkenfooken首先，我嘗試使用語義標記（導致較少的標記），將導航描述爲具有「子列表」的某些鏈接的「鏈接列表」。然後，在jQuery上，通過將結果集緩存在變量中，我加快了搜索時間（jQuery不必一遍又一遍地找到相同的項目）。最後，我使用了更復雜的jQuery選擇器而不是類名或id來保持標記儘可能簡單。如果需要，可以進一步簡化。 – 2010-02-22 21:20:56

感謝您花時間回覆我的問題。 – farkenfooken 2010-02-22 21:55:43

嗯，有幾個方法，你可以做維護你的代碼更容易一點。這裏有一個簡單的例子：

基本上，這將再次重新隱藏所有「subnav」的元素，然後顯示被點擊的一個。但是，這裏的主要區別在於，您現在可以添加第三，第四，等等下拉菜單，或者更改ID而無需更改JavaScript。

您使用的HTML看起來相當不錯，並且與「標準」導航菜單相似。

編輯：這顯然是類似於以前的答案：P

來源

2010-02-22 20:31:07 Chibu

這對我來說代碼更改量最少。 – farkenfooken 2010-02-22 21:57:25

我應該注意到這並沒有成功地切換你點擊的李，只顯示它。 – farkenfooken 2010-02-22 22:40:03

我擺脫了內嵌javascript:void(0)碼這是不必要的。把你的鏈接鏈接到「＃」。

你絕對不希望匹配這樣的ID，它不能很好地擴展。取而代之的是，這樣的事情應該工作（未經測試）：

$('#nav-bar ul li').click(function() {  
    $(this) 
    //hide all subnavs 
    .closest("#nav-bar").find("ul.subnav").hide().end().end() 
    //show subnav under the li clicked 
    .find("ul.subnav").show();  
});

只要有可能，你想chain your jquery代碼，這樣你就不必從DOM每次搶到了新的元素。根據我的理解，在遍歷已找到的元素時鏈更有效，而不是獲取新的元素。（「blah」）。find（「blah2」）我要深入兩層。 .end（）。end（）會將我帶回原始項目（this），以便我可以找到它下面的特定subnav。

來源

2010-02-22 20:31:42 brad

謝謝，我直到現在都不知道.end（）。 – farkenfooken 2010-02-22 22:01:06

這是最好的方法嗎？

回答

相關問題