<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
$(document).ready(function () {
 $('#menu ul').hide();
  $('#menu ul:first').show(); 
   $('#menu li ul li').click(function() {
$(this).find('a').each(function(i) {
if (i == 0) {
$('#menu li ul li a').removeClass("accordionPitchOnLine");
$(this).addClass("accordionPitchOnLine");
}
});
});
   $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
         $('#menu ul:visible').slideUp('normal');
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
});
</script>
<style type="text/css">
   p {
  line-height: 1.5em;
}
ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;/*离左边的长度*/
  width: 15em;/*长度*/
}
ul#menu a {
  display: block;
  text-decoration: none;
}
ul#menu li {
  margin-top: 1px;/*每层之间的距离*/
}
ul#menu li a {
  background: #fff;/*div颜色就是鼠标没经过时*/
  color: #000;/*没选中时字体颜色*/
  padding: 0.5em;
  font-weight: bold;/*粗体*/
}
ul#menu li a:hover {
  background: #CCCCCC;/*鼠标经过时的颜色*/
}
ul#menu li ul li a {
  background: #fff;/*li的颜色*/
  color: #888;/*标签里的字体颜色*/
  padding-left: 40px;/*距离左边的距离*/
  font-size: 15px;
}
ul#menu li ul li a:hover {/*移过去时候有黑色小正方形*/
  background: #f6f6f6;/*鼠标移过去时背景颜色*/
  border-left: 5px #000 solid;/*移过去时候有黑色小正方形颜色*/
  padding-left: 15px;/*移过去时字体位置*/
  font-weight: bold;/*粗体*/
}
.accordionPitchOnLine {
  background: #f6f6f6;
  border-left: 5px #000 solid;
  padding-left: 15px;
  font-weight: bold;
}
</style>
<title>http://www.yuanmaying.com/</title></head>
<body>
<h1>简洁的JQuery竖导航菜单</h1>
<ul id="menu">
<li>
<a href="#">Cool Stuff</a>
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">niutuku</a></li>
<li><a href="#">XBOX360</a></li>
<li><a href="#">niutuku</a></li>
<li><a href="#">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul>
<li><a href="#">Yahoo!</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Ask.com</a></li>
<li><a href="#">Live Search</a></li>
</ul>
</li>
</ul>
    <p></p>
</body>
</html>
我想要当点击之后 background: #f6f6f6;        
 border-left: 5px #000 solid;
  padding-left: 15px;
  font-weight: bold;吧这几个属性加上去,为什么只加上了border-left: 5px #000 solid;如何解决?却又不影响效果。

解决方案 »

  1.   

    不是addclass的问题。。是根本就没有执行那个方法。。自己在检查检查吧
      

  2.   

    可是也没报错啊?执行了只加上了border-left: 5px #000 solid;这个属性,你弄下来跑一下,点击一下,就明白了。。我用alert都能打印出来了。。如果你那出问题了是不是没引jquery的包啊
      

  3.   

    你都说执行了加上了border-left: 5px #000 solid;这个属性那就更不是addclass的问题。。我觉得有可能效果被覆盖了
      

  4.   

    你的样式被覆盖了后面加 !important试试