jquery. 자매가 작동하지 않습니다.

Question

안녕하세요, #box가 열려있을 때 #box가 닫히고 싶습니다.

HTML :

<div id="main"> 
    <div id="link">click</div><!--/*div*/--> 
    <div id="box">content1</div><!--/*div*/--> 
</div><!--/*div*/--> 
<div id="main"> 
    <div id="link">click2</div><!--/*div*/--> 
    <div id="box">content2</div><!--/*div*/--> 
</div><!--/*div*/--> 
<div id="main"> 
    <div id="link">click3</div><!--/*div*/--> 
    <div id="box">content3</div><!--/*div*/--> 
</div><!--/*div*/--> 

JQuery와 :

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#main #box').css('display', 'none') 

$('#main #link').click(function() { 
    $(this).next('#main #box').slideToggle('slow') 
    .siblings('#main #box:visible').css('display', 'none'); 
    }); 
}); 
</script> 

감사합니다!

Answer 1

ID는 만 페이지 당 하나 여야합니다.

"main"을 다시 사용하지 마십시오. 그런 다음

<div class="main"> 
    <div class="link">click</div><!--/*div*/--> 
    <div class="box">content1</div><!--/*div*/--> 
</div><!--/*div*/--> 
<div class="main"> 
    <div class="link">click2</div><!--/*div*/--> 
    <div class="box">content2</div><!--/*div*/--> 
</div><!--/*div*/--> 
<div class="main"> 
    <div class="link">click3</div><!--/*div*/--> 
    <div class="box">content3</div><!--/*div*/--> 
</div><!--/*div*/--> 

, 당신은 다음처럼 자바 스크립트를 바꿀 것 :

$(document).ready(function(){ 
$('.main .box').css('display', 'none') 

$('.main .link').click(function() { 
    $(this).next('.box').slideToggle('slow') 
    .siblings('.box:visible').css('display', 'none'); 
}); 
}); 

은 당신 있도록 .box의 형제 상대하고, 기억

오히려 같은 것을 할 .main을 다시 지정할 필요가 없습니다. 당신은 본질적으로 주된 형제 자매를 찾고 있습니다. class='box:visible'

정말 필요할 때가 아니면 main 클래스가 필요하지 않을 수도 있습니다. 오히려, 구조 코드과 같이 :

<div id='main'> 
    <div> 
    <div class="link">click</div><!--/*div*/--> 
    <div class="box">content1</div><!--/*div*/--> 
    </div> 
    <div> 
    <div class="link">click2</div><!--/*div*/--> 
    <div class="box">content2</div><!--/*div*/--> 
    </div> 
    <div> 
    <div class="link">click3</div><!--/*div*/--> 
    <div class="box">content3</div><!--/*div*/--> 
    </div> 
</div> 

그리고, 당신의 자바 스크립트과 같이 (편집) : 이것에 대한

$(document).ready(function(){ 
    $('#main .box').css('display', 'none') 

    $('#main .link').click(function() { 
    // this will work, but the code below is smoother  
    // $('#main .box').css('display', 'none'); 
    $('#main .box').hide('slow'); // hide smoothly 
    $(this).next('.box').slideToggle('slow'); 
    }); 
}); 

이유는 두 가지입니다. 하나는 ID가 DOM에서 더 빠르게 찾을 수 있으며 문서에 구조를 제공합니다. ID를 다시 사용하지 않아야하므로 페이지에 하나의 기본 요소 만 있습니다.

그러나 나머지 코드는 보지 않아도 레이아웃을 작동 (또는 중단) 할 수 있다고 보장 할 수 없습니다.

Answer 2

ID 대신 클래스를 사용해야합니다. 페이지 당 하나의 고유 ID 만 가질 수 있습니다.

HTML :

<div class="main"> 
    <div class="link">click</div><!--/*div*/--> 
    <div class="box">content1</div><!--/*div*/--> 
</div><!--/*div*/--> 
<div class="main"> 
    <div class="link">click2</div><!--/*div*/--> 
    <div class="box">content2</div><!--/*div*/--> 
</div><!--/*div*/--> 
<div class="main"> 
    <div class="link">click3</div><!--/*div*/--> 
    <div class="box">content3</div><!--/*div*/--> 
</div><!--/*div*/--> 

JQuery와 :

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.main .box').css('display', 'none') 

$('.main .link').click(function() { 
    $(this).next('.main .box').slideToggle('slow') 
    .siblings('.main .box:visible').css('display', 'none'); 
    }); 
}); 
</script>