隐藏并显示单击无序列表中的元素

问题描述：

我正在尝试构建一个侧栏导航，其中列出了类别。有一个按钮可以在点击时展开特定类别的子类别。我没有这样做。为此，我使用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？如果是，那么如何？如果任何人有相同的参考，那么请为我提供该网站的网址。谢谢！

答

如果你想要做的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你的风格设计。我希望你觉得它很有用

答

你可能想使用一个UI框架（并构建你的大部分用户界面），你会节省很多时间，并确保它跨浏览器兼容和稳定。 jQuery是恕我直言，现在是低级操作，为什么它已经完成和测试了一些东西？我仅将它用于自定义特定情况。

引导程序非常受欢迎，并且组件中只有你需要的组件。崩溃是您需要的组件。

答

请检查该片段。希望对你有所帮助。

$("#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>

答

实现这一目标的最简单的方法是只用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>

隐藏并显示单击无序列表中的元素

相关推荐