JQuery - Скрыть и показать - не работает

Question

Я пытаюсь использовать скрипт JQuery Hide и show, чтобы отображать текст поверх изображения при нажатии тега div.

Код JQuery, который я использую, ниже, я создал JSFiddle, чтобы показать 2 примера, до и после с моим текущим результатом.

• ОБНОВЛЕНИЕ: Мне удалось заставить переключатель работать и изменить некоторые CSS. Но нужно, чтобы тег div скрывался до щелчка.

Любая помощь или обратная связь будет большое спасибо (Y)

Im сожалею о ссылке предыдущая;

$(".card-options").click(function() { 
$(".card-list").toggle(); 
}); 

[JSfiddle] [1]

[1] http://jsfiddle.net/jinghming/u4epkev4/

Answer 1

Вместо использования

$("#div").click(function(){ 
$(".box").hide(); 
}); 

$("#div").click(function(){ 
$(".box").show(); 

});

Я использовал функцию переключения;

$("#div").click(function() { 
$(".box").toggle(); 
}); 

* Все еще разрабатывается, как иметь .box, скрытый до щелчка #div. Но в настоящее время происходит переход между скрыть и показать.

Answer 2

Из того, что я понимаю, когда маленький черный ящик щелкает, список должен появляться и исчезать, - я не могу увидеть ссылку на свою обновленную скрипку так вот обновление я сделал свой JS:

$(".card .card-options").click(function() { 
    $(this).parents('.card').find('.card-list').toggleClass('active'); 
}); 

Я также добавил display: none; к вашей декларации .card-list CSS и добавил следующее:

.card-list.active {display: block;} 

Если вы хотите, чтобы нижний бар, чтобы быть в нижней части окна, то вы должны были бы сделать некоторые абсолютное позиционирование.

Смотрите обновленную скрипку здесь: http://jsfiddle.net/u4epkev4/4/

Answer 3

Вам просто нужно сделать тумблер, и вы забыли идти в card-text:

$(".card-list").hide(); // Hides the card list at the start 
$(".card .card-text .card-options").click(function() { 
    // Toggle the card-list for the clicked card 
    $(this).parent().parent().find(".card-list").toggle(); 
}); 

Example