增添一分類別下拉在這個導航

我試圖W圖如何在這個導航的3類添加子類別下拉菜單。例如，可以說3個子類別。我嘗試了一堆方法，但似乎無法弄清楚。所以基本上，當你點擊類別3時，下面會出現另外3個鏈接。任何人都可以協助添加該編碼嗎？這是我在1個HTML文檔中的全部代碼。增添一分類別下拉在這個導航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>-</title> 
<style TYPE="text/css"> 
a:link, a:visited, a:hover, a:active { 
    color: #000; 
    text-decoration: none; 
} 
#trigger { 
    line-height: 50px; 
    float: right; 
    height: 50px; 
    font-size: 1.2em; 
} 
a.menu-link { 
    float: right; 
    display: block; 
    padding-right: 0.5em; 
    padding-left: 0.5em; 
    margin-right: 1em; 
    color: #000; 
} 
nav[role=navigation] { 
    clear: both; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 
.js nav[role=navigation] { 
    overflow: hidden; 
    max-height: 0; 
} 
nav[role=navigation].active { 
    max-height: 18em; 
} 
nav[role=navigation] ul { 
    margin: 0; 
    padding: 0; 
    border-top: 1px solid #000; 
} 
nav[role=navigation] li a { 
    display: block; 
    padding: 0.8em; 
    border-bottom: 1px solid #000; 
    font-size: .875em; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/Javascript"> 
$(document).ready(function() { 
    $('body').addClass('js'); 
    var $menu = $('#menu'), 
    $menulink = $('.menu-link'); 

$menulink.click(function() { 
    $menulink.toggleClass('active'); 
    $menu.toggleClass('active'); 
    return false; 
});}); 
</script> 
</head> 

<body> 
<div id="trigger"><a href="#menu" class="menu-link">Menu</a></div> 
</div> 
<nav id="menu" role="navigation"> 
<ul> 
<li><a href="#">Category 1</a></li> 
<li><a href="#">Category 2</a></li> 
<li><a href="#">Category 3</a></li> 
<li><a href="#">Category 4</a></li> 
<li><a href="#">Category 5</a></li> 
<li><a href="#">Category 6</a></li> 
</ul> 
</nav> 
</body> 
</html>

來源

2012-12-24 DC1

將這個在的jsfiddle – George

考慮提交您的示例代碼在[的jsfiddle（http://jsfiddle.net/）。這樣你就可以消除人們必須採取的步驟來幫助你解決問題。 – seliopou

的jsfiddle鏈接http://jsfiddle.net/ApNhK/ – Zack

我試圖用的jsfiddle我先前發佈的內容。我只是增加了一個<ul>到html元素，並添加CSS代碼，使其默認爲隱藏，然後加入jQuery函數的類別3點擊功能，使新<ul>展會本身。

http://jsfiddle.net/ApNhK/1/

可能不是最好的解決辦法，我敢肯定，你就必須改變一些東西，如果你點擊任何的額外的選項，它隱藏所有額外的菜單選項。但是這也許給你一個你可以去做的方法的想法？

來源

2012-12-24 18:55:50 Zack

感謝您的解決方案 – DC1

這是你想要的嗎？

$('#menu ul li:eq(2)').click(function(){ 
    if($(this).children("a").size()==1){ 
     $(this).append("<a href='#'>subcategory 1</a>"); 
     $(this).append("<a href='#'>subcategory 2</a>"); 
     $(this).append("<a href='#'>subcategory 3</a>"); 
    } 
});

一個的jsfiddle例子在這裏：http://jsfiddle.net/ApNhK/3/

來源

2012-12-24 18:54:56 Josep

點擊一次以上，並追加這些子類別的倍數。 – Zack

@Josep優秀！謝謝。那正是我想要完成的。 – DC1

@ZackT。修好了，謝謝觀察！ – Josep

增添一分類別下拉在這個導航

回答

相關問題