Question

我有这个slideToggle代码。当我点击显示＆＃34;打开＆＃34;的按钮时，它会将文本更改为＆＃34;关闭＆＃34;但问题是它和＃34;关闭＆＃34;即使你再次点击它，我想把文字改回＆＃34;打开＆＃34;当我点击＆＃34;关闭＆＃34;

这段代码完美无缺，但现在它无法正常工作。

<script>
    $(document).ready(function () {
        $("#open").click(function () {
             $("#close").slideToggle("slow");
             var t=$("#open").html()==="close"?"open:close";
             $("#open").html(t);
             reset ();
        });
    });
</script>


<div id="open" align="center"><p>open</p></div>
<div id="close"> <p>dddddddddddd</p></div>

<style type="text/css">

    #open {
        background:blue;
        height:25px;
        color:white;
    }

    #close {
        background:green;
        height:300px;
        color:white;
        display:none;
    }
</style>

Answer 1

尝试使用.text（）而不是.html（）

另一种更好的方法可能是在容器上切换类名，并将函数基于该函数而不是内部文本。

您更新的jquery点击处理程序将如下所示：

$('#toggler').click(function(){
  $(this).next('.textBit').slideToggle().toggleClass('open');

  if($(this).next('.open').length){
    $(this).text('closed');
  }
  else{
    $(this).text('open');
  }

});

快速slideToggle demo，你可以自由编辑

这是version using a ternary operator

Answer 2

请改用：

$("#open").click(function(){
            $("#close").slideToggle("slow"); 
            $("#open").text($(this).text()=="open" ? "close" : "open");
        });

单击SlideToggle jquery后更改div名称

2 个答案: