0

我有一个简单的 jquery 垂直手风琴，想为顶级和子菜单级链接设置不同的字体大小、颜色和粗细。通过更改 CSS 来实现这一点我没有太多运气。我错过了什么？有没有一种简单的方法来做到这一点：

html代码：

<script type="text/javascript">
 $(document).ready(function () {
    $('#nav > li > a').click(function(){
       if ($(this).attr('class') != 'active'){
          $('#nav li ul').slideUp();
          $(this).next().slideToggle();
          $('#nav li a').removeClass('active');
          $(this).addClass('active');
       }
    });
 });
</script>
<style type="text/css"></style>
</head>
<body>
  <ul id="nav">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub-Item 1 a</a></li>
        <li><a href="#">Sub-Item 1 b</a></li>
        <li><a href="#">Sub-Item 1 c</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="#">Sub-Item 2 a</a></li>
        <li><a href="#">Sub-Item 2 b</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>
      <ul>
        <li><a href="#">Sub-Item 3 a</a></li>
         <li><a href="#">Sub-Item 3 b</a></li>
        <li><a href="#">Sub-Item 3 c</a></li>
        <li><a href="#">Sub-Item 3 d</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a>
      <ul>
        <li><a href="#">Sub-Item 4 a</a></li>
        <li><a href="#">Sub-Item 4 b</a></li>
        <li><a href="#">Sub-Item 4 c</a></li>
      </ul>
    </li>
  </ul>
</body>

这是我的CSS 代码：

}
#nav {
float: left;
width: 155px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li a {
display: block;
background: #ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
text-decoration: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;

}
#nav li ul {
display: none; // used to hide sub-menus
}
#nav li ul li a {
background: #ececec;
border-bottom: 1px dotted #ccc;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;

}

对此的任何启发将不胜感激！

4

1 回答 1

0

这应该针对子菜单：

ul#nav li ul li {
    /* some css here to change font etc */
}

或以子菜单中的“a”标签为目标：

ul#nav li ul li a {
    /* some css here to change font etc */
}
于 2012-08-14T09:14:50.897 回答