jQuery .toggle（showOrHide）不起作用

Question

我想使用.toggle（showOrHide）函數檢查狀態。 在api文檔中，它被稱為；

 $( "#foo" ).toggle( showOrHide ); if ( showOrHide === true ) { $( "#foo" ).show(); } else if ( showOrHide === false ) { $( "#foo" ).hide(); } 

但是它不起作用。 有人知道如何使它起作用嗎？ 我想檢查其狀態是顯示還是隱藏。

Answer 1

根據文檔： http : //api.jquery.com/toggle/

該方法的第二個版本接受布爾參數。 如果此參數為true，則顯示匹配的元素；否則為false。 如果為false，則元素被隱藏。 本質上，該語句：

需要聲明true或false ;

var showOrHide = true;

if ( showOrHide === true ) {
    $( "#foo" ).show();
} else if ( showOrHide === false ) {
    $( "#foo" ).hide();
}

在大多數情況下，使用簡寫是有意義的，但是OP似乎需要先檢查狀態。

Answer 2

這是根據我推斷您的問題得出的答案：

如何評估顯示或隱藏的內容？

這個問題由您的評論 推斷 為另一個答案 ：

...我要檢查切換狀態是顯示還是隱藏。

您誤解了toggle(Boolean)作用； 如果您傳遞的布爾值的值為true （否則為“ truthy”），則它將顯示該元素，否則為false （或“ falsey”）的值將隱藏在其上調用toggle()的元素。

要檢索是否顯示該元素，您應該評估布爾值本身（允許使用true / falsey值）：

var isShown = showOrHide ? "Yes, it's shown" : "No, it's hidden";

或者，更嚴格地說：

var isShown = showOrHide === true ? "Yes, it's shown" : "No, it's hidden";

您還可以使用jQuery的.is(':visible')返回一個布爾值，該布爾值描述調用該元素的元素是用戶可見的（ true ）還是隱藏的（ false ）：

var isShown = $('#element').is(':visible');

一個非常簡單的例子，說明了.is('visible') ：

$('#toggleControl').on('change', function(){
    $('#demo').toggle(this.checked);
    $('#status').text(function(){
        return $('#demo').is(':visible') ? 'Shown' : 'Hidden';
    });
}).change();

JS小提琴演示 。

並且，類似地，一個演示測試布爾本身：

$('#toggleControl').on('change', function(){
    var checkbox = this;
    $('#demo').toggle(checkbox.checked);
    $('#status').text(function(){
        return checkbox.checked ? 'Shown' : 'Hidden';
    });
}).change();

JS小提琴演示 。

這兩個演示都在以下HTML上運行：

<input type="checkbox" id="toggleControl" /><label for="toggleControl"> element</label>
<div id="status"></div>
<div id="demo">
    <p>Can be shown or hidden, by checking, or unchecking, the checkbox.</p>
</div>

參考文獻：

• .is() 。
• .on() 。
• toggle() 。
• :visible選擇器 。

Answer 3

您在jQuery文檔中的哪里找到的？ 快速查找表明這是一種顯示或隱藏元素的方法，而不是返回該元素是否可見的方法： http : //api.jquery.com/toggle/

Answer 4

給定一個元素

您提供的代碼可以使用。

為此創建一個函數：

function showOrHide(element, display) {   
    if ( display === true ) {
        $(element ).show();
    } else if ( display === false ) {
        $(element).hide();
    }
}

並用foo調用

showOrHide($('#foo'), true);
showOrHide($('#foo'), false);

Answer 5

這是演示鏈接： DEMO 。

我更新了答案，請檢查是否正確。

這是示例代碼：

var showOrHide = false;
$( "button" ).click(function() {
    showOrHide = !showOrHide;
    if ( showOrHide === true ) {
        $( "#foo" ).show();
    } else if ( showOrHide === false ) {
        $( "#foo" ).hide();
    }
});

Answer 6

您可能錯過了對api的理解（請在此處檢查-向上滾動幾行以查看它）。 在api中表示此$( "#foo" ).toggle( showOrHide ); 等效於：

if ( showOrHide === true ) {
  $( "#foo" ).show();
} else if ( showOrHide === false ) {
  $( "#foo" ).hide();
}

至於使用它：您需要將變量“ showOrHide”的值設置為“ true”或“ false”，然后使用$( "#foo" ).toggle( showOrHide ); ，當然，您需要將“ #foo”更改為任何元素。

至於檢查元素是可見還是隱藏-請檢查此鏈接。

Answer 7

如何使用變量檢查元素的狀態：

var isShowing = true;

$('button').click(function () {
    if (isShowing) {
        $('#foo').hide();
        isShowing = false;
    }
    else {
        $('#foo').show();
        isShowing = true;
    }
});

jsFiddle基於@urbz之前發布的內容...

Answer 8

這也可能會有所幫助。 替代其他答案

var showOrHide = !$( "#foo" ).is(':visible');
$( "#foo" ).toggle( showOrHide );