在带有特定类的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>

我想在页面上添加一个按钮，该按钮隐藏位于ul div中的<div class="scrollbox list">。

这有可能吗？

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>

​