У меня проблема, и мне нужна ваша помощь. У меня есть несколько ссылок (в <aside>), приводящих к нескольким различным меню (в <section>). При щелчке по ссылке отображается только соответствующий div в <section>, остальные скрыты. Эта часть в порядке и работает. Что не работает, когда я нажимаю на изображение:Как скрыть и показать содержимое и наоборот?
- текущий ДИВ (
.menu) в<section>должны быть скрыты; - должна быть показана такая же картина (с большим размером);
- Когда вы нажмете еще раз над большим изображением, большое изображение должно исчезнуть, и текущий div в
.menu(тот, который был спрятан на первом шаге) должен появиться еще раз. Вид переключения между контентом.
Так что, если я нажимаю на изображение на «втором div», то изображение с большим размером должно быть показано (содержимое «второго div» должно быть скрыто), и когда я нажимаю еще раз на большой изображение должно исчезнуть, а содержимое «второго div» должно быть возвращено.
Я пробовал с toggle(), но не имел успеха. Либо я не использовал его правильно, либо не подходит для моего дела. Здесь мне удалось добраться.
Я действительно буду поддерживать вашу поддержку - как показать только скрытый div, а не все скрытые div. Прямо сейчас, когда вы нажимаете на большое изображение, он не показывает скрытый div.
$(window).on("load", function() {
$("div.menu:first-child").show();
});
$(".nav a").on("click", function() {
$("div.menu").fadeOut(30);
var targetDiv = $(this).attr("data-rel");
setTimeout(function() {
$("#" + targetDiv).fadeIn(30);
}, 30);
});
var pictures = $(".img-1, .img-2").on("click", function() {
$("div.menu:active").addClass("hidden");
//how to reach out only the current, active div (not all div's in .menu)?
$(".menu").hide();
var par = $("section")
.prepend("<div></div>")
.append("<img id='pic' src='" + this.src + "'>");
var removePictures = $("#pic").on("click", function() {
$(this).hide();
$(".hidden").show();
});
});.menu {
width: 100%;
display: none;
}
.menu:first-child {
display: block;
}
.row {
display: inline-block;
width: 100%;
}
.img-1,
.img-2 {
width: 120px;
height: auto;
}<!doctype html>
<html>
<head>
</head>
<body>
<aside>
<ul class="nav">
<li><a href="#content1" data-rel="content1">To first div</a>
</li>
<li><a href="#content2" data-rel="content2">To second div</a>
</li>
<li><a href="#content3" data-rel="content3">To third div</a>
</li>
</ul>
</aside>
<section>
<div class="menu" id="content1">
<h3>First Div</h3>
<div class="present">
<div class="row">
<div>
<p>Blah-blah-blah. This is the first div.</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>Blah-blah-blah. This is the first div.</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content2">
<h3>Second Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the second div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. Yjis is the second div.
</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content3">
<h3>Third Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the third div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. This is the third div.
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>Извините за уродливой эскиз и фотографии - это только, чтобы получить представление о том, что она должна выглядеть как ....
в обработчике событий jQuery ... 'this' является элементом, на котором действует. Хотите что-то сделать с родителем ... '$ (this) .parent(). DoSomething()' или '$ (this) .parent(). Find ('. SomeClass'). DoSomething()'. Прочитайте API для всех способов прохождения ... каждый метод показывает примеры – charlietfl
Я прочитал много документов и пробовал много-много вещей. Если бы мне удалось сделать то, что я хотел, я не собирался спрашивать, как это сделать и что я пропустил. Мне нужно письменное решение, а не совет «иди туда и прочитай». Я уже прочитал это, и это не помогло мне ... – GRG
Очень жаль, что пытались помочь. Вам нужно начать с '$ (this)' – charlietfl