Question

我有一个展开/折叠框，点击后标题会更改为＆＃39;点击以显示更多信息...＆＃39;到＆＃39;点击显示较少的信息......＆＃39;

我的问题是，当盒子折叠时，它不会改回＆＃39;点击显示更多信息......＆＃39;点击时。有没有办法编辑我必须实现的代码？

以下是我的小提琴和代码：http://jsfiddle.net/HFcvH/25/

的jQuery

jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(500);
    jQuery(this).text("Click here for less information...");
  });
});

HTML

<p class="heading">Click here for more info...&nbsp;</p>
<div class="content">
  <span style="font-size: 14px; color: rgb(6, 78, 137);">
    <b>Documents Required</b>
  </span>
</div>

Answer 1

＆＃13;

jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
 var s = $(this);
jQuery(this).next(".content").slideToggle(500);
 s.html(s.text() == 'Click here for more info...' ? 'Click here for less information...' : 'Click here for more info...');
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="heading">Click here for more info...</p>
 <div class="content">
      <span style="font-size: 14px; color: rgb(6, 78, 137);">
          <b>Documents Required</b>
       </span>
 </div>

＆＃13;

Answer 2

您为<a>设置的文字不正确。只需将其更改为：

<a href="#" id="more">Less about us</a>

，就是这样！

Updated jsFiddle

Answer 3

我创建了一个更加一致的剪辑：

http://jsfiddle.net/HFcvH/27/

我更喜欢检查元素是否可见而不是文本检查，因为它更灵活

$('#more').click(function() {
    var s = $(this);
    $('#extra').slideToggle('fast', function(){
        s.html($(this).is(":visible") ? 'Less about us' : 'More about us');
    });
    return false;
}).trigger("click");

Answer 4

我对你的小提琴进行了一些改动。我默认隐藏了div，你可以在这里看到：

$('#extra').hide();
$('#more').click(function() {
    var s = $(this);
    $('#extra').slideToggle('fast', function(){
        s.html(s.text() == 'Less about us' ? 'More about us' : 'Less     about us');
    });
    return false;
});

标题更改扩展，但不会崩溃

4 个答案: