编程语言
首页 > 编程语言> > javascript-使用切换jQuery显示/隐藏

javascript-使用切换jQuery显示/隐藏

作者:互联网

jQuery脚本
这段代码有效,但是是否可以在slideToggle方法中添加“选项”,以便切换“显示/隐藏”文本?

$(function() {
    var container  = $('div.container p'),
        button     = $('div#click');
    container.hide();
    button.on('click', function() {
        if (button.text() == 'Show') {
            button.text('Hide');
        } else {
            button.text('Show');
        }
        $(this).next().slideToggle(300);
    });
});

http://jsfiddle.net/sachq/mt3duxzk/1/

解决方法:

您可以继续尝试一下.如果您希望在单击按钮后立即触发回调,也可以将“完成”选项更改为“开始”.

演示:HERE’S A FIDDLE

    var container  = $('div.container p');
    var button     = $('div#click');

    container.hide();
    button.on('click', function(){
        container.slideToggle({
            duration: 200,
            complete: function(){
                var txt = (button.text() === 'Show') ? "Hide" : "Show";
                button.text(txt);
            }
        });
    });

标签:show-hide,toggle,slidetoggle,javascript,jquery
来源: https://codeday.me/bug/20191121/2049369.html