使用jquery切换显示/隐藏

Toggle show/hidden with jquery

本文关键字：隐藏 显示 jquery 使用      更新时间：2023-09-26

我需要使用jquery来切换两个元素显示/隐藏。我希望按钮说"隐藏文本"，并更改为"显示文本"，当它被点击，当然我希望文本从显示切换到隐藏按钮被点击。我有这个改变它一次，但我不知道如何改变它回来或使它切换。

$(function() {
    $('button#1').click(function() {
        $('#one').fadeOut();
    });
    $('button#1').click(function() {
        $('button#1').html('Show Text');
    });
});

http://jsfiddle.net/fwdzm/1/

使用toggle回调函数!

$(function() {
    var $btn1 = $('button#1').click(function() {
        $('#one').toggle('slow', function () {
            if ($(this).is(':visible')) {
                $btn1.html('Hide Text');
            } else {
                $btn1.html('Show Text');
            }
        });
    });
});

$('button#1').click(function() {
    var $btn = $(this);
    $('#one').toggle('slow', function() {
       if ($(this).is(':visible')) {
          $btn.text('Hide');
       } else {
          $btn.text('Show Text');
       }
    });
});

试试这样

$(function() {
  $('button#1').click(function(){
    if ($('#one').is(':visible')) {
      $('#one').fadeOut();
      $(this).html('Show Text');
    } else {
      $('#one').fadeIn();
      $(this).html('Hide Text');
    }
  });
});

将当前状态保存在一个变量中，然后根据该变量显示或隐藏元素并更改按钮上的文本。

HTML 

<button id="toggleBtn" type="button">Hide Text</button>
<span id="element">Your text is here</span>
JAVASCRIPT 

var status = "shown";
function toggleElement() {
    if (status == "shown") {
        $('#element').hide();
        $("#toggleBtn").html('Show Text');
        status = "hidden";
    } else {
        $('#element').show();
        $("#toggleBtn").html('Hide Text');
        status = "shown";
    }
}
相关文章：