は、私は、この基本的なHTMLを持っている特定のクラス

Question

でdivの内側の順不同リストを非表示にします。

これは可能ですか？

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

を、あなたはあなたのボタンにコードの上にバインドをワンド場合は、これを使用して：：

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のを使用することができます

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