Question

我有这个slideToggle代码。当我点击显示＆＃34;打开＆＃34;的按钮时，它会将文本更改为＆＃34;关闭＆＃34;。即使您再次单击它也会保持“关闭”状态，因此我想将文本更改回＆＃34;打开＆＃34;当我点击＆＃34;关闭＆＃34;反之亦然。

  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        $('#flip').html("close");
        reset ();
    });
});
</script>

<style> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

    <div id="flip">open</div>
    <div id="panel">Hello world!</div>

Answer 1

尝试以下代码。

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        var t=$('#flip').html()==='close'?'open':'close';
        $('#flip').html(t);
        reset ();
    });
});

最好你有一个布尔值来检查你在显示什么。像：

var showingClose=false;

$(document).ready(function(){
......
    $("#panel").slideToggle("slow");
    if(showingClose){
        $('#flip').html('open');
    }else{
        $('#flip').html('close');
    }
    showingClose = !showingClose;
.......

正如@filoxo在评论中指出的那样，最好使用$('#flip').text()来获取/设定值。

Answer 2

只需切换css类。查看http://api.jquery.com/toggleclass/

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").toggleClass("flip");
    });
});

的CSS：

#panel
{
    padding:50px;
    display:none;
}
.flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}

Answer 3

您可以结合使用jQuery的.is()函数visibility selector来确定元素是否显示。在我看来，这比布尔值更好，并且对可读性也更好。最后，使用ternary operator可以帮助您根据所述可见性正确设置按钮文本。

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        var btnTxt = $("#panel").is(":visible") ? "close" : "open";
        $('#flip').text( btnTxt );
        reset ();
    });
});

如何使用jQuery更改单击按钮文本

3 个答案: