Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Toggle only single element (https://javascript.ru/forum/jquery/49789-toggle-only-single-element.html)

arborik 28.08.2014 13:20

Toggle only single element
 
Всем привет.
Есть 2 ссылки при клике на них, должны открываться блоки.
Проблема в том, что при клике на каждую из ссылок, открывается 2 блока.
Нужно, если один блок открытый и мы кликаем на другую ссылку, второй блок открывается, а первый закрывается.
Видимый может быть только один блок.
Как решить эту задачу? В какую сторону смотреть?
Спасибо!
<div class="uploads-button">
			<div class="upload-slides">
				<a>UPLOAD SLIDES ></a>
				<div class="drop-block-wrap">
					<div class="drop-block">
						<p>Save presentation as JPEG or PNG. Drag and drop all slides here, or</p>
						<button>ADD SLIDES</button>
						<p>Once all slides are added, press upload.</p>
					</div>
					<div class="buttons">
						<button disabled="disabled">UPLOAD</button>
						<button disabled="disabled">CANCEL</button>
					</div>
				</div>
			</div>
			<div class="upload-video">
				<a>UPLOAD VIDEO ></a>
				<div class="drop-block-wrap">
					<div class="drop-block">
						<p>Drag and drop<br>video here, or</p>
						<button>ADD SLIDES</button>
					</div>
					<div class="buttons">
						<button disabled="disabled">UPLOAD</button>
						<button disabled="disabled">CANCEL</button>
					</div>
				</div>
			</div>
		</div>


$(".upload-video > a, .upload-slides > a").click(function () {
	$(this).next(".drop-block-wrap").toggle();
});

-=1100=- 28.08.2014 13:53

$(".upload-video > a, .upload-slides > a").click(function () {
   $(".drop-block-wrap").hide()
    $(this).next(".drop-block-wrap").toggle();
});


Может так

arborik 28.08.2014 14:02

Работает. Спасибо за помощь.
Но появилась проблема.
При повторном клике на ссылку, блок не закрывается.
Блок закрывается, если нажать на другую ссылку.

-=1100=- 28.08.2014 14:25

Тогда надо делать условие
if($(this).next(".drop-block-wrap").toggleClass("active")){
$(this).next(".drop-block-wrap").fadeIn( скорость, вызов )
}else{
$(this).next(".drop-block-wrap").fadeOut( скорость, вызов )
}

Как то так (это в черне )

BETEPAH 28.08.2014 14:36

как вариант, можно фильтровать
$(".upload-video > a, .upload-slides > a").click(function (e) {
    var wrap = $(this).next(".drop-block-wrap")[0];
    $(".drop-block-wrap").filter(function() {return this !== wrap}).hide();
    $(this).next(".drop-block-wrap").toggle();
});

arborik 28.08.2014 16:47

Спасибо!
Отлично работает! Все как надо!


Часовой пояс GMT +3, время: 09:50.