jQuery 显示隐藏内容和更改链接答案

【问题标题】：jQuery show hide content and Changing linksjQuery 显示隐藏内容和更改链接
【发布时间】：2009-06-18 18:56:10
【问题描述】：

在我的一些公司页面上，我想在单击链接时使用显示和隐藏切换详细信息。

我用过 .toggle() 但是....

但这是一个小问题，当用户点击 Show more 内容应该向下滑动，更重要的是，此文本“显示更多”应该更改为“显示更少”这应该是切换。我希望你清楚我真正需要什么。

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

John McCollum 基本上有你的答案，但你也可以使用 Javascript 速记来让你的代码更紧凑：

$('#toggle').click(function(ev) { 
    $('#content').toggle(); 
    this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more');
 })

编辑：为清楚起见，我还将添加上述代码工作所需的html 标记。在此示例中，所有内容都显示为开始。

<p><a id="toggle" href="#">Show less</a></p>
<div id="content"><!-- your stuff goes here. --></div>

如果您希望一开始就隐藏它，只需将链接文本更改为 "Show more" 并将以下样式规则添加到您的样式表中：

#content { display: none; }

【讨论】：

很棒的解决方案。我在找到以下 Snipplr 代码 sn-p 后发现了这一点，通过使上面的代码成为一个 jQuery 函数，您可以像这样调用它，这样更简洁： element.toggleText('first value', 'second value'); snipplr.com/view/8916/jquery-toggletext
你会如何用类来做到这一点，并让多个 div 分别触发同一个类
@Carlos：如果我需要它可以重用，我肯定会为它写一个 jQuery 插件。
+1 好主意。但是，上面的语法对我不起作用。这是我使用的：$(this).html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more');
@DavidHAust：我一直对何时使用$.html() 和何时使用$.text() 感到有些困惑，因为我在不同的情况下都遇到了问题（主要是什么都没有回来的那种）。我已经更新了我的帖子以反映您的版本 - 毕竟，这至少适用于 one 人（我在撰写本文时未经测试）=)

【解决方案2】：

创建切换功能以设置链接文本并为内容 div 设置动画

$('a.toggle').toggle( 
    function() { 
        $('#contentDiv').slideDown(); 
        $(this).html('Show less');
    }, 
    function() { 
        $('#contentDiv').slideUp(); 
        $(this).html('Show more');
    } 
);

【讨论】：

【解决方案3】：

应该这样做...

HTML：

    <a href="#" id="expand">
        <span class="linktext" >Show More</span>
        <span class="linktext" style="display:none">Show Less
        </span>
    </a>
    <div id="details" style="display:none"><h1>This is the details</h1></div>

Javascript：

$('a#expand').click(function() {
        $('div#details').slideToggle();
        $('span.linktext').toggle();
    });

【讨论】：

【解决方案4】：

您可以通过执行以下操作更改 id 为“toggle”的链接的值：

HTML：

<a href="#" id="toggle">Show More</a>

jQuery（在您的切换功能中）：

$('a#toggle').text('Show less');

【讨论】：

【解决方案5】：

您可以使用 jquery hide() 和 show() 函数隐藏和显示元素，还有一个 slideDown 函数。

所以你会在点击时触发这样的事情

$("#showMore").click(function(){
    $("#showMore").hide();
    $("#showLess").show();
    $("#contentDiv").slideDown();
}

应该差不多了，如果您有任何其他问题，请告诉我。

【讨论】：