켜고 끌 P ... 시간에 하나의

Question

I 다음 HTML 코드를 가지고 :

(예 : http://codepen.io/mdmoura/pen/EtpmK)

<a href="#">OPEN 1</a> 
<p>TEXT 1</p> 
<a href="#">OPEN 2</a> 
<p>TEXT 2</p> 

그리고 다음 JS 있습니다

$('a').click(function (event) { 
    $('p').removeClass('open'); 
    $(this).next().toggleClass('open'); 
    return false; 
}); 
$('html').click(function (event) { 
    $('p').removeClass('open'); 
}); 

을

그래서 링크를 클릭하면 다음 단락이 열리거나 닫힙니다.

하지만 하나의 단락은 한 번에 열 갖고 싶어 ... 그래서 나는

$('a').click(function (event) { 

내부

$('p').removeClass('open'); 

을 추가하지만 난을 클릭하면 지금은 단락 닫히지 않습니다 링크. 그것은 단지 열립니다.

토글이 작동하지 않는 것 같습니다. 어떻게 해결할 수 있습니까?

당신이 toggle는 항상 클래스를 추가 실행되는 모든 p의에서 open를 제거되기 때문에 문제는, 미구엘

Answer 1

을 주셔서 감사합니다. 항상 추가 모든 p 결과에서 open 제거로 Fiddle

Answer 2

당신은 바로 여기에 간단한 변화를 필요 :이 솔루션은

var $ps = $('p'); 
$('a').click(function (event) { 
    var $next = $(this).next().toggleClass('open'); 
    $ps.not($next).removeClass('open'); 
    return false; 
}); 
$('html').click(function (event) { 
    $ps.removeClass('open'); 
}); 

데모가 클릭 a 요소의 다음 p 요소에서 클래스 open을 제거하지 않는 것입니다 open ~ p 태그가 해제 된 앵커를 클릭합니다.

$('a').click(function (event) { 
    $(this).next().toggleClass('open'); 
    $('p').not($(this).next()).removeClass('open'); 
    return false; 
}); 
$('html').click(function (event) { 
    $('p').removeClass('open'); 
}); 

http://jsfiddle.net/bvzU6/1/