Как сделать так, чтобы объект, который имеет display: hidden, отображался как display: block при нажатии другого видимого изображения

Question

То, чего я хочу достичь, это эффект, который я видел на этом сайте

www.press75.com

То есть, когда вы нажимаете на любую из тем изображения, напр. Hoon или Brocco расширение того, что тема появляется ниже. Я видел код с firebug

и я вижу это <div id="theme-gallery" class="content"> <div id="261" class="thumbnail"> <div id="more-info-261" class="hidden">

и при нажатии на любой из них появляется div с дисплеем: "block";

<div id="theme-gallery" class="content"> <div id="261" class="thumbnail"> <div id="more-info-261" class="hidden"> <div id="42" class="thumbnail"> <div id="message" class="more-info sevenfive-message" style="display: block;"> <div id="more-info-42" class="hidden">

Я понимаю, как сделать что-то скрытым и заблокированным, но я не знаю, как сделать так, чтобы при нажатии на изображение описания изображение переходило из скрытого в блок, это делается с помощью javascript или jquery?

Answer 1

Это можно сделать с помощью jquery или javascript. Варианты включают в себя:

$('.thumbnail').click(function(e){$(e.target).next().show();});

$('.thumbnail').click(function(e){
    $('#more-info-' + $(e.target).attr('id')).removeClass('hidden');
});

В любом случае вам нужно будет назначить обработчик события щелчка для каждого эскиза, выбрать описание этого эскиза, а затем открыть его, либо удалив класс «скрытый» (который, предположительно, устанавливает display: none), либо явно вызвав jQuery show функция.

Для чего бы это ни стоило, я бы порекомендовал реализовать это так:

$(document).ready(function(){
   $("#theme-gallery").on("click", ".thumbnail", showDescription);
});
function showDescription(e){
    $('#more-info-' + $(e.target).attr('id')).removeClass('hidden');
}

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