单击时使用jQuery更改P标记文本

时间:2015-04-13 22:06:42

标签: jquery html collapse expand

我正在使用P标记来展开/折叠我的代码目前正在使用的内容。但我也想在点击时更改P标签文本。这样做的最佳方式是什么?

这是我的代码:

的jQuery

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
       jQuery(".heading").click(function() {
           jQuery(this).next(".content").slideToggle(500);
       });
    });
</script>

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>

单击标题类时,将显示内容类。想点击“点击此处获取更多信息...”文字,点击此处即可更改为“点击此处获取更少信息...”。

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

完成所要求的完整示例:

// This extends jQuery's functions and adds a toggleText method.
jQuery.fn.extend({
    toggleText:function(a,b){
        if(this.html()==a){this.html(b)}
        else{this.html(a)}
    }
});

jQuery(document).ready(function() {
    jQuery('.heading').click(function() {
        jQuery(this).toggleText('My first text','My second text');
        jQuery(this).next(".content").slideToggle(500);
    });
});