jQuery .toggle (showOrHide) не работает

Согласно документам: http://api.jquery.com/toggle/

Вторая версия метода принимает логический параметр. Если этот параметр равен true, то отображаются согласованные элементы; если false, элементы скрыты. По существу, утверждение:

Вам нужно объявить true или false;

var showOrHide = true;

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

Использование сокращений будет иметь смысл в большинстве случаев, но, похоже, у ОП есть требование сначала проверить статус.

Это ответ основывается на моем вопросе:

Как оценить, что-то отображается или скрыто?

Этот вопрос вытекает из вашего комментария к другому ответу:

... Я хочу проверить, что статус переключения отображается или скрывается.

Вы не понимаете, что такое toggle(Boolean); если вы передадите логическое значение, которое оценивает значение true (или иначе "правдиво"), тогда он покажет элемент, иначе значение false (или "falsey") скроет элементы (элементы), на которые был вызван toggle().

Чтобы узнать, отображается ли элемент, вы должны сами оценить логическое значение (с учетом значений правды/ложных значений):

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

Или, более строго:

var isShown = showOrHide === true ? "Yes, it shown" : "No, it 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 Fiddle.

И, аналогично, демоверсия самого булева:

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

Демо-версия JS Fiddle.

Обе демо работают в следующем 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 селектор.

Это также может помочь. как альтернатива другим ответам

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

Как насчет использования переменной для проверки состояния элемента:

var isShowing = true;

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

jsFiddle, основанный на том, что ранее опубликовал @urbz...

Где в документах jQuery вы нашли это? Быстрый поиск предполагает, что это способ показать или скрыть элемент, а не возвращать, видно ли элемент: http://api.jquery.com/toggle/

Вот демонстрационная ссылка: DEMO.

Я обновляю ответ и проверяю, правильно ли он нужен.

Вот пример кода:

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

Учитывая элемент

Код, который вы указали, будет работать.

Создайте для него функцию:

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

И назовите его foo

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

вы пропустили понимание api (проверьте здесь - прокрутите несколько строк, чтобы увидеть его). в api он говорит, что этот $( "#foo").toggle( showOrHide ); эквивалентно:

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

как для его использования: вам нужно установить значение переменной "showOrHide" как "true" или "false", а затем использовать $( "#foo").toggle( showOrHide ); , когда, конечно, вам нужно изменить "#foo" на любой элемент.

как для проверки, является ли элемент видимым или скрытым - проверьте эту ссылку.