使用 jquery 单击时显示第一项和 show/hide 项
Show first item and show/hide anothers when click using jquery
我想用 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 做到这一点?
您可以使用.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");
}
});
不是一个理想的方式,但可行...
$("#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>
工作演示
代码:
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();
});
}
您可以使用 :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>
我想用 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 做到这一点?
您可以使用.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");
}
});
不是一个理想的方式,但可行...
$("#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>
工作演示
代码:
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();
});
}
您可以使用 :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>