Question

我有这个javascript代码，可以正常切换div打开/关闭。我无法工作的部分是，当div处于关闭状态时，我希望它显示“Read More”，当它打开时，我希望它显示“Read Less”。

以下是代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
    $('#open-content').click(function () {
        $("#me").show({
            height: 'toggle'
        }, 1000);
    }), $("#clickme").click(function () {
        //do nothing if hovered over
    }, function () {
        //hide on hover out
        $("#me").hide({
            height: 'toggle'
        }, 1000);
    });
});
</script>

这是HTML：

<a href="#" id="open-content" class="button">Read More +</a>
<div id="me">
    <div class="divider clear"></div>
    <div class="inner-content scroll-pane">
    Content
    </div>
    </div>
</div>

Answer 1

在点击活动期间使用以下代码更改主页开放内容的文字，

$('#open-content').text("Read Less")

Answer 2

您应该可以在onclick功能中执行此操作。

$(this).text("Read Less");

或

$(this).html("Read Less");

要么应该工作。

Answer 3

您只需检查div是否可见。

JS：

$(function() {
  $('#open-content').click(function() {
  $('.scroll-pane').toggle();
  if ($('.scroll-pane').is(":visible")){
    $('#open-content').text("Read Less -");
  }
  else{
    $('#open-content').text("Read More +");
  }

  });

});

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><a href="#" id="open-content" class="button">Read Less -</a>

<div id="me">
<div class="divider clear"></div>
<div class="inner-content scroll-pane">
Content
</div>
</div>
</div>

jsbin：http://jsbin.com/AVaqIxU/1/

Answer 4

尝试：

$("#me").slideToggle(0);
$('#open-content').click(function () {
    $(this).text($(this).text() == "Read More +" ? "Read Less -" : "Read More +")
    $("#me").slideToggle(1000);
})

<强> jsFiddle example

需要帮助切换打开＆amp;关闭功能

4 个答案: