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

你可以像这样使用jquery：

<script>
function carouselService(){
    $('.carousel-service-item').each( function(){
        var ths  = $(this),
            thsh = ths.find('.carousel-service-content').outerHeight();
        $(this).find('.carousel-service-image').css('min-height', thsh);
    });
}
carouselService();
</script>
<div class="owl-carousel carousel-service">
    <div class="carousel-service-item">
        <div class="carousel-service-content">
            <h5>Brand Developme</h5>
            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</P>
        </div>
        <!-- /carousel-service-content -->

        <div class="carousel-service-image">

        </div>
        <!-- /carousel-service-image -->
    </div>
    <!-- /carousel-service-item -->
</div>

如果您使用以下方法将上面的代码绑定到您的按钮：

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

Answer 2

请试一试。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用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>

使用特定类隐藏div中的无序列表

3 个答案: