Сделайте DIV видимым при щелчке LI - PullRequest
Новая
       4

Сделайте DIV видимым при щелчке LI

6 голосов
/ 05 июня 2011

У меня есть "1001 * id" overlay, который я хочу сделать видимым, когда пользователь нажимает на li, который его охватывает.

HTML: 

<ul>
    <li class="album" id="nirvana-nevermind">
         <div id="overlay">
              <a href="http://www.nirvana.com">Nirvana</a> Nevermind
         </div>
    </li>
</ul>

CSS: 

#overlay { visibility: hidden; }

JavaScript: 

$(document).ready(function(){

$(".album").click(function() {
    //need the following to toggle
    $("#overlay").css("visibility", "visible");    
});

$("#overlay").click(function() {
    window.location=$(this).find("a").attr("href");
    return false;
});

});

Обновление: Код работает сейчас. Я изменил код в соответствии с тем, что я использую. Наложение DIV # показывает, когда щелкают по LI.album, однако у меня есть несколько таких LI.albums рядом друг с другом, и независимо от того, по какой LI щелкают, #overlay отображается только на самом первом LI. Есть идеи как это исправить?

Ответы [ 5 ]

7 голосов
/ 05 июня 2011

Проблема в том, как вы использовали метод css() jQuery.Вам нужно использовать , для разделения свойства и значения, а не :.

Примерно так: 

$(document).ready(function(){

$(".album").click(function() {
    $("#overlay").css("visibility", "visible");
});

});

См. Здесь рабочий пример в jFiddle.

(Обратите внимание, что ОР изменил способ записи свойства в вопросе с момента написания этого.)

ОБНОВЛЕНИЕ

Я обновил код в JSFilddle , чтобы показать, как вы можете сделать это с несколькими li.

Смотрите здесь полный пример JSFiddle

Во-первых, я изменил ваш оверлей id вместо класса.Это потому, что идентификатор может существовать только один раз в любом данном HTML-документе.Это уникальный идентификатор, а не контейнер.

Thr Код JS просто просматривает текущий объект (тот, который только что щелкнул) и находит всех дочерних элементов с именем класса «overlay».Затем он устанавливает видимость для видимых для этих элементов. 

$(".album").click(function() {
   $(this).children(".overlay").css("visibility","visible");
});
5 голосов
/ 05 июня 2011

вместо 

 $("#overlay").css("visibility":"visible");

использование 

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

или 

 $("#overlay").css("visibility","visible");

Чтобы оно исчезло через некоторое время, взгляните на метод setTimeout и используйте 

 $("#overlay").hide();
2 голосов
/ 05 июня 2011

Изменить 

$("#overlay").css("visibility":"visible");

на 

$("#overlay").css("visibility", "visible");
1 голос
/ 05 июня 2011

Что ты имеешь в виду? Вы тоже хотите автоматически скрывать #overlay? Msgstr "Как я могу изменить свой код, чтобы он выключался через некоторое время?" Если вы хотите автоматически, сделайте это: 

var hide = setTimeout(function () {
    $('#overlay').css('visibility', 'hidden');
}, 5000);

И имейте в виду, что установка видимости скрытого только скрывает его, но все же занимает пространство. Настройка Отображение: нет (скрыть ()) полностью скрывает.

Другое дело, что вы не должны использовать идентификатор для этого div. Как вы, вероятно, знаете, идентификатор можно использовать только один раз, что говорит о том, что вы никогда не сможете использовать свою функцию на нескольких библиотеках с одинаковыми функциями. Я бы сделал это классом, а затем: 

$('.album').click(function () {
    $(this).children('.overlay').css('visibility', 'hidden');
});

Таким образом, он будет работать с каждым li, у которого есть оверлей div.

1 голос
/ 05 июня 2011

Изменить $("#overlay").css("visibility":"visible"); на: 

$(this).children("#overlay").css("visibility", "visible");

См. fiddle для живого примера.

Примечание: вы должны изменить overlay на атрибут класса.

...