使用 jquery 单击时显示第一项和 show/hide 项

Question

我想用 Show more 和 Show less link 显示前 5 个 divs，以便用户展开它们。当页面加载时，我只希望一个 div 可见并隐藏。单击 Show more 我想显示前五个。

我的div是这样排列的：

<div class = "OffersContainer">
    <div class='pan-box'></div>
    <div class='pan-box'></div>
    <div class='pan-box'></div>
</div>

我想在 OffersContainer 中对我的 div 产生影响。我怎样才能用 jquery 做到这一点？

Answer 1

Working Demo

您可以使用.slideUp() , .slidedown()

 .OffersContainer{display:none;}

 <div class="trip">Show more</div>
<div class = "OffersContainer">
    <div class='pan-box'></div>
    <div class='pan-box'></div>
    <div class='pan-box'></div>
</div>

$(".trip").click(function(){

       if($(".OffersContainer").hasClass("visible")){

              $(".OffersContainer").slideUp().removeClass("visible");
              $(".trip").html("show more");
          }else
          {

             $(".OffersContainer").slideDown().addClass("visible");

             $(".trip").html("show less");
          }

});

Answer 2

不是一个理想的方式，但可行...

$("#state").on("click", function(){
  $(".OffersContainer").toggle(function(){
    if($(this).is(":visible")){
      $("#state").text("Show less");
    }
    else  {
      //alert("no visible"); 
      $("#state").text("Show more");
      }
  });
});

.OffersContainer{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="state">Show more</div>
<div class = "OffersContainer">
    <div class='pan-box'>div1</div>
    <div class='pan-box'>div2</div>
    <div class='pan-box'>div3</div>
</div>

Answer 3

工作演示

JS FIDDLE

代码：

CSS

#more,#less,.hide{display:none;}

HTML

<div class = "OffersContainer">
    <div class='pan-box'>1</div>
    <div class='pan-box'>2</div>
    <div class='pan-box'>3</div>

    <div class='pan-box'>4</div>
    <div class='pan-box'>5</div>
    <div class='pan-box'>6</div>

    <div class='pan-box'>7</div>
    <div class='pan-box'>8</div>
    <div class='pan-box'>9</div>

    <div class='pan-box'>a</div>
    <div class='pan-box'>b</div>
    <div class='pan-box'>c</div>
</div>

JQUERY

$(function () {
    display();
    $('#more').on('click',function(){
        $(".pan-box").removeClass('hide');
        $(this).hide();
        $('#less').show();
    });
    $('#less').on('click',function(){
        display();
        $(this).hide();
        $('#more').show();
    });         
});

function display(){
    $(".pan-box").each(function (i,v) {
        if(i>=4){
            $(this).nextAll().addClass( "hide");
        }   
        $('#more').show();                       
    });
}

Answer 4

您可以使用 :gt() 选择器来查找索引大于数字的元素。

$(".OffersContainer > div:gt(0)").hide();
$(".OffersContainer > span").click(function(){
    $(this).siblings("div:gt(0)").slideToggle(); 
    $(this).text($(this).text() == "Show more" ? "Show less" : "Show more");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OffersContainer">
    <div class='pan-box'>A</div>
    <div class='pan-box'>B</div>
    <div class='pan-box'>C</div>
    <div class='pan-box'>D</div>
    <div class='pan-box'>E</div>
    <span>Show more</span>
</div>

使用 jquery 单击时显示第一项和 show/hide 项

Show first item and show/hide anothers when click using jquery

javascript

jquery

html

slidetoggle

HTML

JQUERY