Затваряне на toggle()

ExpressYourself

Registered
Има ли начин да проверя дали даден елемент е отворен и при натискане на даден бутон да се затваря..
Причината за която ми трябва е, че имам няколко елемента който отварят различни дивове с toggle, и искам когато се натисне единия бутон да отвори дива този див който е бил отворен да се скрива и да се показва този който съм натиснал. И така да правят останалите.
 
като си направиш глобална променлива о тип boolean примерно и по начало да е false като е отворен даден елемент и присвояваш true а като го затваряш false и си правиш проверка при натискане дали има отворен елемент ако го затваряш и продължаваш.
 
Функцията toggle е идентична на атрибута display от css, с тази разлика че toggle скрива и показва даден елемент с ефект. Следователно чрез конструкцията var val = $("#diver").css("display"); ще получиш стойността на display и ще я запишеш на променливата val. Така виждаш дали въпросния елемент е скрит или не. (ако е скрит стойността е none, ако е показан може да бъде block, inline-block и др.). Оттам с една if конструкция си скриваш др елемент и показваш този за който е бил предназначен клика. 8)
 
проверяването на style-ове на даден елемен е мн по бавно (още повече напвавено с jquery) от присвояването на стоиност на променлива и постигаш същия резултат за по-малко време.
 
hpstuff каза:
проверяването на style-ове на даден елемен е мн по бавно (още повече напвавено с jquery) от присвояването на стоиност на променлива и постигаш същия резултат за по-малко време.

Мм дай някакъв пример или демонстративен код да схвана как ще се получи :]
 
hpstuff каза:
проверяването на style-ове на даден елемен е мн по бавно (още повече напвавено с jquery) от присвояването на стоиност на променлива и постигаш същия резултат за по-малко време.

Нека да е по-бавно. На никой няма да му гръмне компютъра от едно проверяване на стил. Много по-чист начин е според мен. И ако имам 100 елемента какво ще направиш ако отворя 50 от тях? Ще правя 50 променливи и ще ги проверявам?

Според мен по-чистия и разбираем начин е с id на съответния елемент и с проверяване на display.

Ето и пример с jquery. Не е най-простото май, но сега нямам време да търся нещо по-лесно.

http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/
 
Ето ти jquery кода:
Код:
$(function() {
			$("button").click(function() {
				$("div").slideUp(500);
				var i = $(this).attr("id");
				var id = i.slice(1);
				$("#d"+id).toggle(500);
			});
		});
А ето и съдържанието на секцията body:
Код:
       <div id="d1">cont1</div>
	<div id="d2">cont2</div>
	<div id="d3">cont3</div>
	<div id="d4">cont4</div>
	<div id="d5">cont5</div>

       <button type="button" id="b1">Button1</button>
	<button type="button" id="b2">Button2</button>
	<button type="button" id="b3">Button3</button>
	<button type="button" id="b4">Button4</button>
	<button type="button" id="b5">Button5</button>
Как работи:
Като кликнеш на някой от бутоните, всички дивове се скриват. След това
взимаме стойността на атрибута id на натиснатият бутон, като на нас ни трябва само числото (id="b1"). И после показваме дивът със id="#d" + числото. Разбира се ти можеш и по др. начин да си го направиш, но тогава jquery кодът ще бъде по-дълъг. После ти остава само да стилизираш и си готов. :D[/code]
 

Back
Горе