为什么li点击变色，其他兄弟节点的样式效果无效呢？

Question

我有这样一个需求，有多个li列表，鼠标放到其中一个li上的时候文字变色，底部有一个粗线条，点击后，文字也变色，底部也有粗线条，当鼠标放到其他li上的时候，这个li项中的文字变色，底部有一个粗线条，点击这个li中的文字的时候，之前被点击的li项恢复最初的样式，现在被点击的li中的文字变色，底部出现粗线条，但是点击其他li中文字的时候，原来被点击的li的样式没有恢复最初的效果。我的样式定义如下：
.ziyuankuai1{
    width:100px;
    height:30px;
    line-height:25px;
    margin:13px;
    float:left;
    font-size:14px;
    font-weight:bold;
    color:#000;
    text-align: left;
    cursor:pointer;
    overflow: hidden;
}
.ziyuankuai1 li{
    margin-left: -15px;
}
.ziyuankuai1:hover {
    width:100px;
    height:30px;
    line-height:25px;
    color: #000;
    margin:13px;
    float:left;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    text-align: left;
    overflow: hidden;
    cursor:pointer;
    color:orange;
    border-bottom:2px solid orange;
}.ziyuankuai1selected{
    cursor:pointer;
    color:orange;
    border-bottom:2px solid orange;
}页面代码如下：
 <ul class="w3-ul w3-center">
<div class="ziyuankuai1">
<li>项目一</li>
</div>
<div class="ziyuankuai1">
<li>项目二</li>
</div>
<div class="ziyuankuai1">
<li>项目三</li>
</div>
<div class="ziyuankuai1">
<li>项目四</li>
</div>
</ul>js代码如下：
<script type='text/javascript' language='javascript'>
    $(document).ready(function(){
        $(".w3-ul li").click(function(){
            $(this).parent().addClass("ziyuankuai1selected").siblings().addClass("ziyuankuai1");
        });
    });</script>

Answer 1

            $(this).parent().addClass("ziyuankuai1selected").siblings().removeClass("ziyuankuai1selected");

Answer 2

另外ul与li层级之间不应该有别的元素，这不符合html标准，有的浏览器解析可能会出错，div应该放到li内。

Answer 3

好的，谢谢你，我试试去，因为我这样不符合html标准是为了实现一个特殊的隐藏效果才不得已，不然是不会这样操作的。

Answer 4

现在有2个小问题，
第一是 $(this).parent().addClass("ziyuankuai1selected").siblings().removeClass("ziyuankuai1selected");
这个方法确实有效，但是我点击以后，文字没有变成我想要的橙色，只有文字底部出现了那个橙色的粗线条，难道
.ziyuankuai1selected{
    cursor:pointer;
    color:orange;
    border-bottom:2px solid orange;
}
这个样式的color:orange不起作用吗？第二，我有2个父容器，分别放了多个<li></li>，这样，点击第一个父容器下的某个<li>以后，这个<li>的底部有橙色粗线条，再去点第二个父容器下的任意一个<li>，这时第一个父容器下刚才被点击的<li>还是保持被点击的样式，而我想要的是这2个容器中的任意<li>被点击以后，之前的被点击的<li>恢复最初默认的样式。
<div class="lishibanji">
   <div class="ziyuankuai1">
       <li>项目一</li>
   </div>
   <div class="ziyuankuai1">
       <li>项目二</li>
   </div>
   <div class="ziyuankuai1">
       <li>项目三</li>
   </div>
....
</div><div class="huodongbanji">
   <div class="ziyuankuai1">
       <li>项目四</li>
   </div>
   <div class="ziyuankuai1">
       <li>项目五</li>
   </div>
   <div class="ziyuankuai1">
       <li>项目六</li>
   </div>
</div>