Как я могу сделать элемент появляться и исчезать с помощью Jquery.

0

Я хочу сделать что-то вроде этого:

$(document).ready(function(){
    if($('.undermenu').css('display','block')){
        $('#menu').click(function(){
            $('.undermenu').css('display','none');
        });
    }
    else{
        $('#menu').click(function(){
            $('.undermenu').css('display','block');
        });
    }
});

Этот код не работает, но есть ли какой-либо эффект "JQuery" или что-то еще, что я могу использовать для скрытия/скрытия. Например, есть ли способ проверить, установлен ли на дисплее или нет? Благодарю.

Теги:
dom

5 ответов

9
Лучший ответ

Просто используйте toggle():

$('#menu').click(function() {
    $('.undermenu').toggle();
});

Хотя причина вашего if($('.undermenu').css('display','block')) не работает, потому что вы устанавливаете свойство display элементов (элементов) на block, а не на display собственности и тестирования, которые будут:

if ($('.undermenu').css('display') =='block')

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

$('#menu').click(function(){
    if ($('.undermenu').css('display') == 'block') {
        $('.undermenu').hide();
    }
    else {
        $('.undermenu').show();
    }
});

Или, если вы хотите рисковать гневом своих коллег, вы можете немного вздохнуть:

$('#menu').click(function(){
    var undermenu = $('.undermenu');
    undermenu[undermenu.css('display') == 'block' ? 'hide' : 'show']();
});

Рекомендации:

Поделиться
  • 0
    спасибо, ты лучший;)
  • 0
    Большое спасибо, надеюсь, я вам помог! :)
Показать ещё 3 комментария
1

Вы используете сеттер в своем состоянии:

// This line update .undermenu to display it and return true (return $('.undermenu'), so true)
if($('.undermenu').css('display','block')){

Но вы должны получить значение и проверить

if($('.undermenu').css('display') === 'block'){

И вы кодируете концепцию плохо. Если вы это сделаете, вы проверите документ, если будет отображаться.undermenu или нет, и вы поместите функцию в триггер щелчка (чтобы отобразить или скрыть..), но! когда ваш.undermenu был изменен, у вас уже есть один и тот же триггер (чтобы отобразить или скрыть, и он никогда не изменится).

Поэтому вам нужно поставить триггер для каждого щелчка и проверить значение (отображаемое или нет) на триггере:

$(document).ready(function(){
    $('#menu').click(function(){
        if($('.undermenu').css('display') === 'block'){
           $('.undermenu').hide();
        }
        else {
           $('.undermenu').show();
        }
    });
});
Поделиться
0

В jquery существует:

$("#element_id").show();

$("#element_id").hide();

также вы можете использовать:

$("#element_id").fadeIn();

$("#element_id").fadeOut();

Это показывает и скрывает элементы с эффектами затухания.

Вы можете запросить, если элемент скрыт:

if($("#element_id").is(":hidden")){
    $("#element_id").show():
}
else{
    $("#element_id").hide();
}
Поделиться
0

Вы можете поместить оператор if в функцию, чтобы вы не повторялись. Возможно, вы также можете использовать toggle(); в зависимости от того, что вы делаете. ---

$('#menu').click(function(){

    if ( $('.undermenu').is(':visible') ) {

        $('.undermenu').hide();

     else {

        $('.undermenu').show();

    }

});

Это тоже хорошо, в зависимости от того, что вы делаете, но может быть лучше другого.

if ( $('.undermenu').css('display') === 'block' ) {//do something }

Поделиться
0

То, что вы ищете, является .toggle()

$("div").click(function () {
    $("img").toggle("slow", function () {
    // Animation complete.
    });
});

Вот скрипка: http://jsfiddle.net/FQj89/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню