Question

我正在尝试显示内容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

有谁能告诉我怎么办？

谢谢。

Answer 1

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

Answer 2

试试这个小提琴：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");
        }
    });
});

Answer 3

这个怎么样：

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。

Demo

使用链接显示和隐藏内容

3 个答案: