Jquery tıklama ?

25-09-2013, 17:25:25

BR9

Arkadaşlar bir sorum var çözüme ulaşamadım bir türlü.

spor adında bir divim var

spor isimli dive tıklayınca

icerik isimli div açılıyor

kısacası böyle

<div class="spor">

  <li class="icerik"> </li>

</div>

<div class="spor">

  <li class="icerik"> </li>

</div>

spor ve içerik isimli divden 20 30 tane olduğunu sayalım. JQUERY ile spor isimli dive tıklattığımızda içerik açılsın dediğimde hepsi bir anda açılıyordu.

 $(function(){
	
	$('.spor').click(function(){
	$(this).next(".icerik").slideToggle();
	
  });
});

ben o sorunu bu şekilde çözdüm. Fakat şimdi tam tersi bir isteğim var çözemediğim. Spor isimli dive tıklandığımızda içerik açılıyor. Diğer spor isimli aynı dive tıklandığımızda onun içeriğinin açılıp ilk açtığımın kapanmasını istiyorum.

Nasıl yapabiliriz ? Umarım anlatabilmişimdir. İyi forumlar dilerim.

25-09-2013, 23:04:34

#2

dark_way

$('.spor').click(function(){
var index = $(this).index('.spor'); // tıkladığımız divin index (sıra) numarasını aldık
$('.spor .icerik').not(index).slideUp(200); // tıklanan div içindeki hariç, tüm içerik divlerini kapat
$(this).find('.icerik').slideToggle(200); // tıklanan spor içindeki icerik divini aç kapat
});

Kontrol etmedim ama çalışçaktır. Kolaygelsin

25-09-2013, 23:09:57

#3

RooTsGhosT

hocam google dan jquery accordion menü olarak arama yaparsanız istediğiniz gibi bir sürü script bulabilirsiniz en basit olara http://jqueryui.com/accordion/ sayfayı inceleyelbilirsiniz...

25-09-2013, 23:17:48

#4

frdtrkc

http://jsfiddle.net/YsvbC/
Linkte çalışır şeklini görebilirsiniz.

$(function () {
    $('.spor').click(function () {
        $(".icerik").slideUp();
        $(".icerik", this).slideDown();
    });
});

26-09-2013, 10:06:52

#5

Divxci

sorunun temeli index();

26-09-2013, 11:11:55

#6

BR9

dark_way adlı üyeden alıntı: mesajı görüntüle

$('.spor').click(function(){
var index = $(this).index('.spor'); // tıkladığımız divin index (sıra) numarasını aldık
$('.spor .icerik').not(index).slideUp(200); // tıklanan div içindeki hariç, tüm içerik divlerini kapat
$(this).find('.icerik').slideToggle(200); // tıklanan spor içindeki icerik divini aç kapat
});

Kontrol etmedim ama çalışçaktır. Kolaygelsin

Cevabınız ve yardımınız için teşekkürler kodunuz çalışıyor 1 virgül koymayı unutmuşsunuz fakat bu kodu çalıştırınca tüm divler kapanıyor

26-09-2013, 14:30:17

#7

Divxci

Alıntı

$(function(){
$("li.icerik").hide();
$('div.spor').click(function(){
var index = $(this).index();
$("li.icerik").eq(index).slideToggle();
});

});

Alıntı

<div class="spor">
1. div
<li class="icerik">1. içerik </li>

</div>

<div class="spor">
2. div
<li class="icerik">2. içerik</li>

</div>
<div class="spor">
3. div
<li class="icerik">3. içerik</li>

</div>

Bu tam çalışır.

26-09-2013, 14:44:26

#8

dark_way

BR9 adlı üyeden alıntı: mesajı görüntüle

Cevabınız ve yardımınız için teşekkürler kodunuz çalışıyor 1 virgül koymayı unutmuşsunuz fakat bu kodu çalıştırınca tüm divler kapanıyor

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<style type="text/css">.icerik{display:none;}</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('.spor').click(function(){
			var index = $(this).index('.spor');
			$('.spor').not(index).find('.icerik').stop().slideUp(200);
			$(this).find('.icerik').stop().slideToggle(200);
		});
	});
	</script>
</head>
<body>
	<div class="spor">spor1
	  <li class="icerik">içerik1</li>
	</div>
	<div class="spor">spor2
	  <li class="icerik">icerik2</li>
	</div>
</body>
</html>

Denendi, sorun yok. Kolaygelsin.

Ekledi; kapanıp açılcak olan etiketi, kendisinin kapanıp aşılmasını tetikleyecek olan nesnenin içine değil de sonrasına veya öncesine koyarsanız. sadece .spor içeriğine tıklanınca içindeki. icerik açılıp kapanır. Mevcut durumdaki kullanımda açılan etikete tıklandığında da kendinin kapanmasını tetikleyecektir. .icerik etiketlerini .spor etiketlerinin dışına koymanızı öneririm. Sonrasına koyduğunuzu farzedersek koddaki ".find()"leri ".next()"le değiştirebilirsiniz.

26-09-2013, 16:40:40

#9

BR9

dark_way adlı üyeden alıntı: mesajı görüntüle

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<style type="text/css">.icerik{display:none;}</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('.spor').click(function(){
			var index = $(this).index('.spor');
			$('.spor').not(index).find('.icerik').stop().slideUp(200);
			$(this).find('.icerik').stop().slideToggle(200);
		});
	});
	</script>
</head>
<body>
	<div class="spor">spor1
	  <li class="icerik">içerik1</li>
	</div>
	<div class="spor">spor2
	  <li class="icerik">icerik2</li>
	</div>
</body>
</html>

Denendi, sorun yok. Kolaygelsin.

Ekledi; kapanıp açılcak olan etiketi, kendisinin kapanıp aşılmasını tetikleyecek olan nesnenin içine değil de sonrasına veya öncesine koyarsanız. sadece .spor içeriğine tıklanınca içindeki. icerik açılıp kapanır. Mevcut durumdaki kullanımda açılan etikete tıklandığında da kendinin kapanmasını tetikleyecektir. .icerik etiketlerini .spor etiketlerinin dışına koymanızı öneririm. Sonrasına koyduğunuzu farzedersek koddaki ".find()"leri ".next()"le değiştirebilirsiniz.

Hocam merhaba ,

Çalışmıyor anlamında demedim tam düzgün çalışıyor ama yeni farkettim ufak bir sorunumuz var. Ellerinize sağlık bu arada.

.spor adlı dive tıklanınca .icerik açılsın diyoruz amacımız bu.

div şu şekilde

 

<div class="spor">

</div>
<div class="icerik"></div>

Burada sorun olan şu. İçerik divi spor divinin içinde değil bu şekilde senin kodlarını deneyince çalışmıyor. Fakat içerik divini spor divinin içerisince alınca çalışıyor.

Benim amacım ise içerik divini spor divinin içine almadan bu işlemi gerçekleştirmek.