Question

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

我的divs安排如下：

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

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

Answer 1

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

＆＃13;

$(".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");
});

＆＃13;

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

＆＃13;

Answer 2

工作演示

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 3

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 4

不是理想的方式，但工作......

$("#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>

使用jquery单击时显示第一个项目并显示/隐藏其他项目

4 个答案:

HTML

JQUERY