当我离开类别划分时如何进行子类别划分?

时间:2017-07-10 09:47:22

标签: javascript

.category-list{
    position:fixed;
    top:50px;
    width:20%;
    margin-left:50px;
   
}
#subcat1 , #subcat2 , #subcat3 , #subcat4 , #subcat5 , #subcat6 , #subcat7 , #subcat8 , #subcat9 , #subcat10 {
    position:fixed;
    top:50px;
    left:350px;
    width:50%;
}
 <div class="category-list" id="list-category">
     <div class="list-group">
        <a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >First item</a>
        <div class="subcat" id="subcat1" style="display:none;" >
             <div class="list-group">
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
                  <a href="#" class="list-group-item">First item</a>
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
                  <a href="#" class="list-group-item">First item</a>
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
                  <a href="#" class="list-group-item">First item</a>
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
              </div>
         </div>
    </div>

一旦我离开类别划分,这就让子类别划分消失了 我想创建一个类似于购物网站中的类别和子类别 提前致谢

1 个答案:

答案 0 :(得分:0)

由于

.subcat消费者

onmouseout="document.getElementById('subcat1').style.display = 'none';"

您可以使用

onmouseover="document.getElementById('subcat1').style.display = 'block';"

.subcat上。

&#13;
&#13;
.category-list{
    position:fixed;
    top:50px;
    width:20%;
    margin-left:50px;
   
}
.subcat{
    margin-left: 60px;
    position:fixed;
 }
&#13;
 <div class="category-list" id="list-category">
     <div class="list-group">
        <a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >First item</a>
        <div class="subcat" id="subcat1" style="display:none;"  onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >
             <div class="list-group">
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
                  <a href="#" class="list-group-item">First item</a>
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
                  <a href="#" class="list-group-item">First item</a>
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
                  <a href="#" class="list-group-item">First item</a>
                  <a href="#" class="list-group-item">Second item</a>
                  <a href="#" class="list-group-item">Third item</a>
              </div>
         </div>
    </div>
&#13;
&#13;
&#13;