我正在尝试显示内容DIV
,其中包含展开和折叠的链接。
在我的内容DIV
中,有一个无序列表。当页面打开时,我想只显示两个带有展开链接的列表项。如果用户需要查看其他列表项,则需要单击展开链接。展开后,DIV链接文本必须更改为Collapse
。而且如果在我的无序列表中只有2个项目,则无需显示链接。
注意:无序列表是使用PHP
动态生成的。
我的HTML是这样的 -
<div id="mycontent">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p><a href="">+ View More</a><p>
</div>
我的Jquery -
$("a").click(function(){
$("#mycontent").toggle();
});
这是我目前的代码 - http://jsbin.com/mojuteve/1/edit
有谁能告诉我怎么办?
谢谢。
答案 0 :(得分:3)
$(function() {
$("#mycontent li:gt(1)").hide(); // Initially show only first two items
if ($("#mycontent li").length <= 2) {
// Hide "View More" if there are no more to show
$("#showmore").hide();
}
$("#showmore").click(function() {
$("#mycontent li:hidden").slideDown();
$("#showmore,#collapse").toggle();
return false; // Prevent following the link
});
$("#collapse").click(function() {
$("#mycontent li:gt(1)").slideUp();
$("#showmore,#collapse").toggle();
return false; // Prevent following the link
});
});
使用以下HTML:
<div id="mycontent">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<p><a id="showmore" href="#">+ View More</a>
<a id="collapse" href="#">- Collapse</a><p>
</div>
和CSS:
#collapse {
display:none;
}
答案 1 :(得分:1)
试试这个小提琴:http://jsfiddle.net/Bn92C/2/
您应该使用的代码,它将在“a”
中切换文本$(function(){
$(".mycontent").hide();
$("a").click(function(){
$(".mycontent").slideToggle("fast");
$(this).toggleClass("more");
if($("a").hasClass("more")) {
$("a").text("- View Less");
} else {
$("a").text("+ View More");
}
});
});
答案 2 :(得分:1)
这个怎么样:
CSS:
#mycontent {
background: #fff;
overflow: hidden;
}
#mycontent > ul {
display: block;
width: 400px;
}
#mycontent > ul > li {
display: inline-block;
padding: 0 20px 10px 0;
}
#mycontent > ul > li + li + li {
display: none;
}
#mycontent p {
float: right;
padding: 0 20px;
}
#mycontent.visible ul > li {
display: inline-block;
}
jQuery的:
//Check if the list items are less than 3 and if so remove the more link
(function () {
var listLenght = $('#mycontent ul li').length;
if (listLenght < 3) {
$('#mycontent a').remove();
}
})();
//Variable for the text change
var linkText = ['+ View More', '- Collapse'];
$('a').on('click', function (e) {
e.preventDefault();
var $this = $(this);
// Better practice to toggle classes instead of using show/hide
$('#mycontent').toggleClass('visible');
//Text Change
if($this.text() === linkText[0]){
$this.text(linkText[1]);
}else{
$this.text(linkText[0]);
}
})
但是检查列表长度是否为2或更少将更好地使用php而不是js。