如何使用slideToggle（）更改按钮值

Question

请你看一下这个Demo，让我知道如何用slideToggle（）函数更改按钮Text？我只需要将文本更改为显示或隐藏。 我所拥有的是：

<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');   
    }
});

因此，只要文本在点击时“隐藏”，文本就会变为“显示”。反过来说。

jsFiddle

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')
        }
    }); 
});