.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>





一旦我退出类别划分,这将使子类别划分消失
我想像购物网站一样创建一个类别和子类别
提前致谢

最佳答案

.subcat消失是由于
onmouseout="document.getElementById('subcat1').style.display = 'none';"
您可以使用
onmouseover="document.getElementById('subcat1').style.display = 'block';"
.subcat上也是如此。

.category-list{
    position:fixed;
    top:50px;
    width:20%;
    margin-left:50px;

}
.subcat{
    margin-left: 60px;
    position:fixed;
 }

 <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>

关于javascript - 我退出类别划分时如何举行子类别划分?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45008788/

10-12 00:09
查看更多