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

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

我在之前发布的JSFiddle尝试了一些东西。我刚刚在HTML元素中添加了另一个<ul>并添加了CSS代码以使其默认隐藏，然后将jQuery函数添加到category3单击函数中，以使新的<ul>显示自身。

http://jsfiddle.net/apnhk/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/

相关内容

最新更新

热门标签：