使用链接显示和隐藏内容答案

【问题标题】：Show and Hide the content using a link使用链接显示和隐藏内容
【发布时间】：2014-05-31 09:06:46
【问题描述】：

我正在尝试显示带有展开和折叠链接的内容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

谁能告诉我该怎么做？

谢谢。

【问题讨论】：

请在此处发布您的代码，而不仅仅是作为 jsbin 链接。
那个 jQuery 代码看起来不像你在 jsbin 上发布的。
是的，我很抱歉...jsbin.com/mojuteve/1/edit

标签： javascript jquery css

【解决方案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;
}

【讨论】：

小错误，:gt(2)应该是:gt(1)。
太棒了.. @Barmar 我们可以使用另一种方法来制作动画，而不是 slideUp 和 slidedown。原因是碰撞元素很少。
也许使用淡入淡出？我自己并没有真正使用这些东西。
链接使用类代替ID，使用DOM遍历函数查找相关内容DIV而不是硬编码#content。请你自己去想办法，这就是你学习的方式，而不是我为你做的。
是的，我已经尝试过使用类，这就是我尝试过的 -jsfiddle.net/barmar/BXDv8/1

【解决方案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");
        }
    });
});

【讨论】：

它首先有 .find() 但这里不需要
这该死的令人困惑。如果你改变它，我们怎么知道他从哪里开始？你应该 fork 一个新版本，而不是覆盖他的。
不，我需要显示 2 个带有链接的列表项以查看更多内容。
@TNK 注意 id 在代码中是唯一的。不允许使用其中的 2 个，它实际上会起作用，但您可以更好地使用类而不是 id
@TNK 查看 css-tricks.com 上的页面：css-tricks.com/the-difference-between-id-and-class

【解决方案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

【讨论】：