1

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

2 回答 2

2

我用之前发布的 JSFiddle 进行了尝试。我只是<ul>在html元素中添加了另一个并添加了css代码以使其默认隐藏，然后将jquery函数添加到Category3单击函数以使新<ul>显示本身。

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

可能不是最好的解决方案，而且我相信您必须更改一些内容，就像单击任何额外选项一样，它会隐藏所有额外选项菜单。但这也许可以让您了解一种可以解决的方法？

于 2012-12-24T18:55:50.070 回答
1

这是你想要的吗？

$('#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-24T18:54:56.503 回答