Question

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

我使用了.toggle（）但....

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

由于

Answer 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; }

Answer 2

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

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

Answer 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();
    });

Answer 4

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

HTML：

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

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

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

Answer 5

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

所以你会点击这样的东西点击

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

应该就这样做，如果您有任何其他问题，请告诉我。

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

5 个答案: