如何使用 slideToggle() 更改按钮值

Question

我正在做这个演示。如何使用slideToggle（）函数更改按钮文本？我只需要将文本更改为显示或隐藏。我拥有的是：

<button id="boxToggle">Show</button>
<div id="over_map"></div>
$("#boxToggle").click(function(){
    $("#over_map").slideToggle();
  });

Answer 1

您可以使用

.text()函数更改文本。所以这样的事情会起作用：

$("#boxToggle").click(function(){
    $("#over_map").slideToggle();
    
    if($(this).text() == 'Hide')
    {
        $(this).text('Show');
    }
    else
    {
        $(this).text('Hide');   
    }
});

因此，每当单击文本"隐藏"时，文本将更改为"显示"。反之亦然。

js小提琴

Answer 2

试试这个

<button id="boxToggle">Show</button>
<div id="over_map"></div>
$("#boxToggle").click(function(){
    $("#over_map").slideToggle();
    $("#boxToggle").prop('value', 'hide');
  });

或

$("#boxToggle").click(function(){
    $("#over_map").slideToggle();
    $("#boxToggle").text('hide');
  });

Answer 3

将按钮文本更改为"隐藏"并在下面使用 JS

$("#boxToggle").click(function(){
    $("#over_map").slideToggle(function(){
        if($("#over_map").is(':visible')){
            $("#boxToggle").text('Hide')
        }
        else{
            $("#boxToggle").text('Show')
        }
    }); 
});