하나 div를 표시하고 토글에 다른 div를 모두 숨길 수 있습니까?

세 개의 표제가 있으며 세 명 모두 설명이 있습니다.
첫 번째 제목을 클릭하면 설명을 볼 수 있습니다.
2 번째 제목을 클릭하면 설명을 볼 수 있습니다.
내 코드는 여기에 있습니다 :
JS :하나 div를 표시하고 토글에 다른 div를 모두 숨길 수 있습니까?

<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery(".content").hide(); 
//toggle the componenet with class msg_body 
jQuery(".heading").click(function() 
{ 
jQuery(this).next(".content").slideToggle(500); 
}); 
}); 
</script>

CSS :

.layer1 { 
margin: 0; 
padding: 0; 
width: 500px; 
} 

.heading { 
margin: 1px; 
color: #fff; 
padding: 3px 10px; 
cursor: pointer; 
position: relative; 
background-color:#c30; 
} 
.content { 
padding: 5px 10px; 
background-color:#fafafa; 
} 
p { padding: 5px 0; }

html 코드 : 이제 내가 원하는

<div class="layer1"> 
    <p class="heading">Header-1 </p> 
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    <p class="heading">Header-2</p> 
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    <p class="heading">Header-3</p> 
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div>

이 내가 한 일 제목을 클릭 다른 설명 숨기고 첫 번째 제목에 대한 설명 만 표시됩니다.
이 작업을 수행하는 방법 ..?

출처

2012-08-09 Rikin Thakkar

모두 숨기기 .content 형제 :

jQuery(".heading").click(function() { 
    jQuery(this) 
      .next(".content").slideToggle(500) 
      .siblings(".content").slideUp(500); 
});

출처

2012-08-09 11:48:52 ori

깔끔하고 깨끗한 답변입니다. – Christoph

js에이 코드를 넣으면 출력을 얻을 수 없습니다. 어디서이 코드를 작성합니까 ..? –

내 브라우저에서 작동하지 않는 이유는 무엇입니까? –

작동하지 않습니까? 선택한 .content의

jQuery(document).ready(function() { 
    jQuery(".content").hide(); 
    //toggle the componenet with class msg_body 
    jQuery(".heading").click(function() { 
     jQuery(".content").slideUp(); 
     jQuery(this).next(".content").slideDown(500); 
     }); 
});

http://jsfiddle.net/cUyhe/

출처

2012-08-09 11:48:39 paulslater19

jQuery(document).ready(function() { 
    jQuery(".content").hide(); 
    //toggle the componenet with class msg_body 
    jQuery(".heading").click(function() { 
     jQuery(".content").not(jQuery(this).next(".content")).slideUp(500); 
     jQuery(this).next(".content").slideToggle(500); 
    }); 
});

FIDDLE

출처

2012-08-09 11:48:45 adeneo

두 사람이 어떻게 같은 의견으로 같은 대답을 보냈는지 재미 있습니다! –

질문에 코드를 복사했기 때문일 수 있습니까? – adeneo

jQuery(document).ready(function() { 
    //toggle the componenet with class msg_body 
    jQuery(".heading").click(function() 
    { 
     jQuery(this).parent().find(".opened").slideToggle(500, function(){ 
     $(this).removeClass('opened'); 
     }); 
     jQuery(this).next(".content").slideToggle(500, function(){ 
     $(this).addClass('opened'); 
     }); 
    }); 
});

출처

2012-08-09 11:49:45

그게 작동하지 않습니다 –

http://jsfiddle.net/94Jvw/를 보시기 바랍니다. 그것은 거기에서 일하고 있습니다 ... –

그곳에서 일하고 있습니다, 왜 내 PC에서 작동하지 않습니다. :( –

은 C에서 이것을 시도 핥기 이벤트 .. 당신은 그렇게 할을 식별 할 수있어

출처

2012-08-09 11:51:00 Santhiya

당신을 위해 작동

jQuery(".heading").click(function() 
    { 
     jQuery(".content").hide(); 
     jQuery(this).next(".content").slideToggle(500); 
    });

희망 .... 클래스를 사용하여 클래스별로 태그를 가져올 수 있고 모든 것을 숨기지 않고 숨길 수있는 것보다 다른 이름으로 복제본을 만들어 식별 할 수 있습니다.

출처

2012-08-09 11:51:43 Gustavo

하나 div를 표시하고 토글에 다른 div를 모두 숨길 수 있습니까?

답변

관련 문제