单击时链接文本更改。多看少看 jquery - Bootstrap 手风琴答案

【问题标题】：Link text changes on click. See more, See less jquery - Bootstrap accordion单击时链接文本更改。多看少看 jquery - Bootstrap 手风琴
【发布时间】：2014-01-16 10:56:57
【问题描述】：

所以我使用 bootstrap 手风琴来隐藏/取消隐藏信息。

我需要不断地将措辞从“多看”改为“少看”。

正如您在bootply 中看到的那样，我已经实现了这一点

如您所见，我面临的问题是，当第一次单击时，它会从“查看更多”变为“查看更多”，然后再次单击它会开始按我的意愿工作。

我知道为什么会这样，但不知道如何删除 a href 文本并立即显示隐藏的信息。

$(document).ready(function () {
    $("#morebtn").click(function () {
        $(this).html($(this).html() == "See more" ? "See less" : "See more");
    });
});

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是因为第一轮您的 HTML 实际上是 <strong>See more</strong> 而不是您想象的“查看更多”。
将其更改为 $(this).text() == "See more" 即可：)
然后，您可以向元素添加一个类以使其变为粗体。否则，您每次都需要使用<strong> 标签重新包装

【讨论】：

【解决方案2】：

删除查看更多文本周围的标签并通过 css 应用该样式，它将起作用。

【讨论】：

【解决方案3】：

试试这个

 $(this).html(($(this).html() == "See more" )? "See less" : "See more");

测试对我有用

确保将 id 赋予支持 html() 属性的 dom 元素

我试过了

  <div id="morebtn"  style="background-color:red;width:64px;height:56px;"></div>

如果给按钮 id 然后使用

    $(this).attr('value',($(this).attr('value') == "See more" )? "See less" : "See more");

【讨论】：

【解决方案4】：

试试这个：

$(this).html($(this).text() == "See more" ? "See less" : "See more");

或者如果#morebtn 是<a> tag，请这样做：

$(this).text(function(index,text){
   return text ? "See less" : "See more"
});

【讨论】：