躲在里面的div无序列表与特定的类

Question

我有这个基本的HTML：

<div class="row"> 
    <div class="col-md-12"> 
     <div class="scrollbox list">    
      <ul class="list-unstyled"> 
       <li id="articulate.flute">articulate flute</li> 
       <li id="nepalese.ledger">nepalese ledger</li> 
       <li id="rural.grass">rural grass</li> 
       <li id="alone.fox">alone fox</li> 
       <li id="rummage.senator">rummage senator</li> 
      </ul> 
     </div> 
    </div> 
</div> 

我想补充这隐藏了<div class="scrollbox list"> DIV中坐在ul页面上的按钮。

这可能吗？

Answer 1

您可以使用slideToggle()

$(document).ready(function(){ 
 
    $('.toggleList').click(function(){ 
 
    $('.list-unstyled').slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="scrollbox list"> 
 
      <button class="toggleList"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button> 
 
      <ul class="list-unstyled"> 
 
       <li id="articulate.flute">articulate flute</li> 
 
       <li id="nepalese.ledger">nepalese ledger</li> 
 
       <li id="rural.grass">rural grass</li> 
 
       <li id="alone.fox">alone fox</li> 
 
       <li id="rummage.senator">rummage senator</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

你可以使用jQuery这样的：

$(".scrollbox").find('ul').hide(); 

，如果你的魔杖上面的代码绑定到您使用按钮此：

<script> 
    $(document).ready(function(){ 
     $("#buttonName").click(function(){ 
      $(".scrollbox").find('ul').hide(); 
    }); 
    }); 
</script> 

Answer 3

请试试这个。

$(".hide-btn").click(function(){ 
 
    $(".list-unstyled").hide(); 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <button class="btn btn-default hide-btn">hide</button> 
 
     <div class="scrollbox list">    
 
      <ul class="list-unstyled"> 
 
       <li id="articulate.flute">articulate flute</li> 
 
       <li id="nepalese.ledger">nepalese ledger</li> 
 
       <li id="rural.grass">rural grass</li> 
 
       <li id="alone.fox">alone fox</li> 
 
       <li id="rummage.senator">rummage senator</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>