Question

如何通过点击功能将多个标题更改为“展开”更改为“展开”？

<h2 class="expand" id="content-1" style="cursor:pointer;" value="One">Click to expand One</h2>
<h2 class="expand" id="content-2" style="cursor:pointer;" value="Two">Click to expand Two</h2>

只是不确定如何去做。

 $('.expand').on('click', function() {
     $('#').show();
      $(this).children().text('Click here to collapse ' + value);
    }, function () {
      $('#').hide();
      $(this).children().text('Click here to expand ' + value);
    });
});

Answer 1

一种好方法是检查您展开的元素的可见性：

$('.expand').on('click', function() {
    $("#").toggle();
    $("#").is(":visible") ? $(this).text("Click to collapse") : $(this).text("Click to expand");
});

Answer 2

   $('.expand').on('click', function() {
      if($(this).text().indexOf('expand') >0 )
          $(this).text('Click to collapse ' + $(this).attr("value"));
       else
           $(this).text('Click to expand ' + $(this).attr("value"));

    });

演示：http://jsfiddle.net/XY4Xm/

Answer 3

$('.expand').on('click', function() {
   $(this).attr('class','collapse');
    alert(this.className);
});

这只是更改类名的部分，如果需要，您也可以在方法中添加其他代码。

fiddle here

点击更改文字

3 个答案: