Question

我尝试使用切换打开div并更改按钮上的文本。我的jquery代码如下：

$(".open").click(function(){
        if($(this).text()=== "open"){
            $(this).text("close");
        }
        else{
            $(this).text("open");
        }
        $("div").show(300);
    });

和html是：

<button class="open">open</button>
<div style="display:none;">test box</div>

请帮助我如何显示/隐藏我的div以及更改按钮上的文字。

Answer 1

您可以使用带回调功能的 text() 或 html() 来切换文字， toggle() 用于显示和隐藏div。

$(".open").click(function() {
  $(this).text(function(i, v) { return v == "open" ? "close" : "open"; });
  $("div").toggle(300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="open">open</button>
<div style="display:none;">test box</div>

Answer 2

在您的情况下，只需更改$("div").toggle(300);而不是$("div").show(300);即可。

＆＃13;

$(".open").click(function(){
        if($(this).text()=== "open"){
            $(this).text("close");
        }
        else{
            $(this).text("open");           
        }
         $("div").toggle(300);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="open">open</button>
<div style="display:none;">test box</div>

＆＃13;

我如何隐藏/显示我的div与按钮上的更改文本

2 个答案: