Почему скрытый контейнер не появляется, когда я нажимаю на него?

Question

У меня есть скрытый контейнер, содержащий комментарии, и <div> с <p> внутри, в котором говорится «Показать все комментарии», которые я нажимаю, чтобы показать комментарии. Когда я нажимаю div, он показывает контейнер скрытых комментариев, но когда я его снова нажимаю, он не скрывает контейнер комментариев. Я думаю, что что-то не так с моим кодом jQuery?

var commentsHidden = $(".comments-container").is(":hidden"); 

if (commentsHidden) { 
    $(".see-all").click(function() { 
     $('.comments-container').show('slow'); 
     $('.see_hide').text('Hide Comments'); 
    }); 

} else { 

    $(".see-all").click(function() { 
     $('.comments-container').hide(); 
    }); 

}; 

Answer 1

При инициализации комментариевHidden он никогда не обновляется, поэтому он всегда имеет свое начальное значение. Вам нужно проверить, не скрыт ли он при каждом нажатии. Таким образом, вам не нужна инструкция if для присоединения события. Просто прикрепите событие с одним кликом и проверьте внутри события, если он скрыт и продолжит соответственно.

$(".see-all").click(function() { 
    var commentsHidden = $(".comments-container").is(":hidden"); 
    if (commentsHidden) { 
     $('.comments-container').show('slow'); 
     $('.see_hide').text('Hide Comments'); 
    } else { 
     $('.comments-container').hide(); 
    } 
}); 

Answer 2

При вызове on('click', ..) или его ярлык click(..), установить новый обработчик. Что происходит, так это то, что у вас есть несколько обработчиков на одном и том же объекте, и они вызывают все. Вместо этого, либо установить обработчик только один раз:

// In global code or code that gets executed upon module load 
// Only once! 
$(".see-all").click(function() { 
    if ($(".comments-container").is(":hidden")) { 
    $('.comments-container').show('slow'); 
    $('.see_hide').text('Hide Comments'); 
    } else { 
    $('.comments-container').hide(); 
    } 
}); 

или unbind старый обработчик:

$(".see-all").off('click'); // Unbind all click handlers 

var commentsHidden = $(".comments-container").is(":hidden"); 
if (commentsHidden) { 
    $(".see-all").click(function() { 
    $('.comments-container').show('slow'); 
    $('.see_hide').text('Hide Comments'); 
    }); 
} else { 
    $(".see-all").click(function() { 
    $('.comments-container').hide(); 
    }); 
}; 

Answer 3

Вам необходимо проверить состояние флага внутри функции мыши(). Теперь у вас есть только привязка обработчика кликов один раз на загрузке страницы.

$(".see-all").click(function() { 
    var commentsHidden = $(".comments-container").is(":hidden"); 
    if (commentsHidden) { 
     $('.comments-container').show('slow'); 
     $('.see_hide').text('Hide Comments'); 
    } else { 
     $('.comments-container').hide(); 
    } 
}); 

Answer 4

Try изменения в

$(".see-all").click(function() { 
    var commentsHidden = $(".comments-container").is(":hidden"); 
    if (commentsHidden) { 
     $('.comments-container').show('slow'); 
     $('.see_hide').text('Hide Comments'); 
    }); 
    } else { 
    $(".see-all").click(function() { 
     $('.comments-container').hide(); 
    }); 
    } 
}); 

Обработчик щелчка должен быть связан только один раз, и вы должны проверить, являются ли комментарии скрыты каждый раз щелкнул р элемент.