隱藏並顯示單擊無序列表中的元素

Question

我正在嘗試構建一個側欄導航，其中列出了類別。 有一個按鈕可以在點擊時展開特定類別的子類別。 我沒有這樣做。爲此，我使用jQuery。這裏是我的功能

<script> 
$(document).ready(function(){ 
$('.side-nav ul').slightSubmenu({ 
    buttonActivateEvents : 'click', 
    handlerButtonIn : function($submenuUl) { 
     $submenuUl.show(200); 
    }, 
    handlerForceClose : function($submenuUl) { 
     $submenuUl.hide(200); 
    }, 
    prependButtons    : true 
}); 
$('.side-nav ul.expand').show(); 
$('.side-nav li').click(function(){ 
    $(this).parent().toggleClass('collapse expand'); 
}); 
$('.side-nav .selection-path > span').addClass('opened'); 
}); 
</script> 

這裏就是我想build。在擴展this。 我的問題是，它可以發生在CSS？如果是，那麼如何？ 如果任何人有相同的參考，那麼請爲我提供該網站的網址。謝謝！

Answer 1

如果你想要做的CSS一個可摺疊的樹可以使用目錄的圖案設計是這樣的：

*{margin:0;padding:0;} 
 
body{padding:100px;background:#929292;font-size:100%;font-family:"Arial";} 
 
input{font-size:1em;} 
 
ol.tree{padding-left:30px;} 
 
li{list-style-type:none;color:#fff;position:relative;margin-left:-15px;} 
 
li label{padding-left:37px;cursor:pointer;background:url("https://www.thecssninja.com/demo/css_tree/folder-horizontal.png") no-repeat 15px 2px;display:block;} 
 
li input{width:1em;height:1em;position:absolute;left:-0.5em;top:0;opacity:0;cursor:pointer;} 
 
li input + ol{height:1em;margin:-16px 0 0 -44px;background:url("https://www.thecssninja.com/demo/css_tree/toggle-small-expand.png") no-repeat 40px 0;} 
 
li input + ol > li{display:none;margin-left:-14px !important;padding-left:1px} 
 
li.file{margin-left:-1px !important;} 
 
li.file a{display:inline-block;padding-left:21px;color:#fff;text-decoration:none;background:url("https://www.thecssninja.com/demo/css_tree/document.png") no-repeat 0 0;} 
 
li input:checked + ol{height:auto;margin:-21px 0 0 -44px;padding:25px 0 0 80px;background:url("https://www.thecssninja.com/demo/css_tree/toggle-small.png") no-repeat 40px 5px;} 
 
li input:checked + ol > li{display:block;margin:0 0 0.063em;} 
 
li input:checked + ol > li:first-child{margin:0 0 0.125em;}

<ol class="tree"> 
 
    <li> 
 
    <label for="menu-1">menu-1</label> 
 
    <input type="checkbox" checked id="menu-1" /> 
 
    <ol> 
 
     <li> 
 
     <label for="menu-1-1">menu-1-1</label> 
 
     <input type="checkbox" id="menu-1-1" /> 
 
     <ol> 
 
      <li> 
 
      <label for="menu-1-1-1">menu-1-1-1</label> 
 
      <input type="checkbox" id="menu-1-1-1" /> 
 
      <ol> 
 
       <li> 
 
       <label for="menu-1-1-1-1">menu-1-1-1-1</label> 
 
       <input type="checkbox" id="menu-1-1-1-1" /> 
 
       <ol> 
 
        <li class="file"><a href="">menu-1-1-1-1-1</a></li> 
 
        <li class="file"><a href="">menu-1-1-1-1-2</a></li> 
 
        <li class="file"><a href="">menu-1-1-1-1-3</a></li> 
 
       </ol> 
 
       </li> 
 
       <li class="file"><a href="">menu-1-1-1-2</a></li> 
 
       <li class="file"><a href="">menu-1-1-1-3</a></li> 
 
       <li class="file"><a href="">menu-1-1-1-4</a></li> 
 
       <li class="file"><a href="">menu-1-1-1-5</a></li> 
 
       <li class="file"><a href="">menu-1-1-1-6</a></li> 
 
      </ol> 
 
      </li> 
 
      <li class="file"><a href="">menu-1-1-2</a></li> 
 
      <li class="file"><a href="">menu-1-1-3</a></li> 
 
      <li class="file"><a href="">menu-1-1-4</a></li> 
 
     </ol> 
 
     </li> 
 
     <li class="file"><a href="">menu-1-2</a></li> 
 
     <li class="file"><a href="">menu-1-3</a></li> 
 
    </ol> 
 
    </li> 
 
    
 
    <li> 
 
    <label for="menu-2">menu-2</label> 
 
    <input type="checkbox" id="menu-2" /> 
 
    <ol> 
 
     <li> 
 
     <label for="menu-2-1">menu-2-1</label> 
 
     <input type="checkbox" id="menu-2-1" /> 
 
     <ol> 
 
      <li> 
 
      <label for="menu-2-1-1">menu-2-1-1</label> 
 
      <input type="checkbox" id="menu-2-1-1" /> 
 
      <ol> 
 
       <li class="file"><a href="">menu-2-1-1-1</a></li> 
 
       <li class="file"><a href="">menu-2-1-1-2</a></li> 
 
       <li class="file"><a href="">menu-2-1-1-3</a></li> 
 
       <li class="file"><a href="">menu-2-1-1-4</a></li> 
 
       <li class="file"><a href="">menu-2-1-1-5</a></li> 
 
      </ol> 
 
      </li> 
 
      <li class="file"><a href="">menu-2-1-2</a></li> 
 
      <li class="file"><a href="">menu-2-1-3</a></li> 
 
      <li class="file"><a href="">menu-2-1-4</a></li> 
 
     </ol> 
 
     </li> 
 
     <li class="file"><a href="">menu-2-2</a></li> 
 
     <li class="file"><a href="">menu-2-3</a></li> 
 
    </ol> 
 
    </li> 
 
    
 
    <li> 
 
    <label for="menu-3">menu-3</label> 
 
    <input type="checkbox" id="menu-3" /> 
 
    <ol> 
 
     <li> 
 
     <label for="menu-3-1">menu-3-1</label> 
 
     <input type="checkbox" id="menu-3-1" /> 
 
     <ol> 
 
      <li> 
 
      <label for="menu-3-1-1">menu-3-1-1</label> 
 
      <input type="checkbox" id="menu-3-1-1" /> 
 
      <ol> 
 
       <li class="file"><a href="">menu-3-1-1-1</a></li> 
 
       <li class="file"><a href="">menu-3-1-1-2</a></li> 
 
       <li class="file"><a href="">menu-3-1-1-3</a></li> 
 
       <li class="file"><a href="">menu-3-1-1-4</a></li> 
 
       <li class="file"><a href="">menu-3-1-1-5</a></li> 
 
      </ol> 
 
      </li> 
 
      <li class="file"><a href="">menu-3-1-2</a></li> 
 
      <li class="file"><a href="">menu-3-1-3</a></li> 
 
      <li class="file"><a href="">menu-3-1-4</a></li> 
 
     </ol> 
 
     </li> 
 
     <li class="file"><a href="">menu-3-2</a></li> 
 
     <li class="file"><a href="">menu-3-3</a></li> 
 
    </ol> 
 
    </li> 
 
    
 
    <li> 
 
    <label for="menu-4">menu-4</label> 
 
    <input type="checkbox" id="menu-4" /> 
 
    <ol> 
 
     <li> 
 
     <label for="menu-4-1">menu-4-1</label> 
 
     <input type="checkbox" id="menu-4-1" /> 
 
     <ol> 
 
      <li> 
 
      <label for="menu-4-1-1">menu-4-1-1</label> 
 
      <input type="checkbox" id="menu-4-1-1" /> 
 
      <ol> 
 
       <li class="file"><a href="">menu-4-1-1-1</a></li> 
 
       <li class="file"><a href="">menu-4-1-1-2</a></li> 
 
       <li class="file"><a href="">menu-4-1-1-3</a></li> 
 
       <li class="file"><a href="">menu-4-1-1-4</a></li> 
 
       <li class="file"><a href="">menu-4-1-1-5</a></li> 
 
      </ol> 
 
      </li> 
 
      <li class="file"><a href="">menu-4-1-2</a></li> 
 
      <li class="file"><a href="">menu-4-1-3</a></li> 
 
      <li class="file"><a href="">menu-4-1-4</a></li> 
 
     </ol> 
 
     </li> 
 
     <li class="file"><a href="">menu-4-2</a></li> 
 
     <li class="file"><a href="">menu-4-3</a></li> 
 
    </ol> 
 
    </li> 
 
    
 
    <li> 
 
    <label for="menu-5">menu-5</label> 
 
    <input type="checkbox" id="menu-5" /> 
 
    <ol> 
 
     <li> 
 
     <label for="menu-5-1">menu-5-1</label> 
 
     <input type="checkbox" id="menu-5-1" /> 
 
     <ol> 
 
      <li> 
 
      <label for="menu-5-1-1">menu-5-1-1</label> 
 
      <input type="checkbox" id="menu-5-1-1" /> 
 
      <ol> 
 
       <li class="file"><a href="">menu-5-1-1-1</a></li> 
 
       <li class="file"><a href="">menu-5-1-1-2</a></li> 
 
       <li class="file"><a href="">menu-5-1-1-3</a></li> 
 
       <li class="file"><a href="">menu-5-1-1-4</a></li> 
 
       <li class="file"><a href="">menu-5-1-1-5</a></li> 
 
      </ol> 
 
      </li> 
 
      <li class="file"><a href="">menu-5-1-2</a></li> 
 
      <li class="file"><a href="">menu-5-1-3</a></li> 
 
      <li class="file"><a href="">menu-5-1-4</a></li> 
 
     </ol> 
 
     </li> 
 
     <li class="file"><a href="">menu-5-2</a></li> 
 
     <li class="file"><a href="">menu-5-3</a></li> 
 
    </ol> 
 
    </li> 
 
    
 
</ol>

工作的其餘部分是aplly你的風格設計。我希望你覺得它很有用

Answer 2

你可能想使用一個UI框架（並構建你的大部分用戶界面），你會節省很多時間，並確保它跨瀏覽器兼容和穩定。 jQuery是恕我直言，現在是低級操作，爲什麼它已經完成和測試了一些東西？我僅將它用於自定義特定情況。

引導程序非常受歡迎，並且組件中只有你需要的組件。崩潰是您需要的組件。

Answer 3

請檢查該片段。希望對你有所幫助。

$("#btnID").click(function(){ 
 
    $("#myTabs").slideToggle(), 
 
    $(this).toggleClass("active"), 
 

 
    
 
    $("#myTabs li a").on("click",function(){ 
 
     $("#myTabs").slideUp() 
 
     $('#btnID').removeClass("active") 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="sub-nav"><button class="btn text-uppercase" id="btnID"><span>Alle websites</span></button> 
 
      \t <ul id="myTabs" class="nav nav-tabs" role="tablist" style="display: none;"> 
 
        <li class="active"><a href="#" role="unieke-tab" >EINZIGARTIGE WEBSEITEN</a></li> 
 
        <li class=""><a href="#">WEBSHOPS</a></li> 
 
            
 
       </ul> 
 
       </nav>

Answer 4

實現這一目標的最簡單的方法是隻用CSS，服用兄弟選擇（~）和隱藏無線電元件的優勢！

a { 
 
    color: #223; 
 
    text-decoration: none; 
 
} 
 

 
.sub-menu { 
 
    display: block; 
 
    max-height: 0; 
 
    transition: max-height 0.3s; 
 
    overflow: hidden; 
 
    will-change: max-height; 
 
} 
 

 
input:checked ~ .sub-menu { 
 
    max-height: 100px; 
 
}

Side menu: 
 
<ul> 
 
    <li> 
 
    <label for="parent1">Parent link 1</label> 
 
    <input type="radio" id="parent1" hidden name="sub-menu-trigger"> 
 

 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub item 1</a></li> 
 
     <li><a href="#">Sub item 2</a></li> 
 
     <li><a href="#">Sub item 3</a></li> 
 
    </ul> 
 
    </li> 
 
    
 
    <li> 
 
    <label for="parent2">Parent link 2</label> 
 
    <input type="radio" id="parent2" hidden name="sub-menu-trigger"> 
 
    
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub item 1</a></li> 
 
     <li><a href="#">Sub item 2</a></li> 
 
     <li><a href="#">Sub item 3</a></li> 
 
     <li><a href="#">Sub item 4</a></li> 
 
     <li><a href="#">Sub item 5</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>