Question

我想弄清楚如何在此导航的类别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>

Answer 1

我尝试过我之前发布的JSFiddle。我刚刚在html元素中添加了另一个<ul>并添加了css代码以使其默认隐藏，然后将jquery函数添加到Category3点击功能以使新的<ul>显示自己。

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

可能不是最好的解决方案，而且我相信你必须改变一些东西，就像点击任何额外的选项一样，它会隐藏所有额外的选项菜单。但这可能会让你想到一种可以解决它的方法吗？

Answer 2

这是你想要的吗？

$('#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/

在此导航中添加子类别下拉列表

2 个答案: