クリックして順序付けされていないリストの要素を隠して表示する

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で起こることができますか？はいの場合は、どうですか？ 誰かが同じものを参照している場合は、そのウェブサイトのURLを私に提供してください。ありがとう！

Answer 1

あなたはCSSで折りたたみ可能なツリーは、このようなディレクトリパターンの設計に使用できる作りたい場合は、次の作業の残りの部分はapllyあなたのスタイルのデザインです

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

を。あなたが役に立つと思ってください。

Answer 2

あなたはUIフレームワークを使用してUIの大半を構築したいと思うかもしれませんが、あなたは多くの時間を節約し、ブラウザ間で互換性があり安定していることを確認します。 jQueryはIMHOですが、現在は低レベルの操作ですが、なぜ何かをして、すでにテストしていますか？私はカスタム、特定の場合にのみ使用します。

ブートストラップは本当に人気があり、必要なものだけを得ることができるコンポーネントが付属しています。 Collapseは必要なコンポーネントです。

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>