2010-07-17 2 views
0

그래서 저는 jQuery에서 겉으로보기에는 매우 근본적인 것을 성취하려고합니다. 나는 "헤더"를 가지고 있는데, 헤더를 클릭하면 그 헤더 밑의 정보가 아래로 내려가고, 다른 모든 헤더 정보는 위로 움직여서 (한 번에 하나의 헤더 만 정보를 보여줍니다).클릭 한 항목을 제외한 모든 jQuery 요소를 토글하는 방법은 무엇입니까?

가 여기 일이 원하는 것을 sudo는 코드입니다 :

$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) { 
    $(this).children('.game-info-text').slideToggle("Slow"); 
    [all other ('.game-info-text')].slideUp(fast) 
}); 

날의 수명을하지만, 나는 [(다른 모든 ('.game-정보를 그 두 번째 줄을 코딩하는 방법을 알아낼 수 없습니다 -본문')]). 어떤 도움을 많이 주시면 감사하겠습니다!

(내가하는 드루팔 행동으로 이것을 구현하고있어 나는 "JQuery와 처리"클래스가 추가되는 이유)

답변

3

뭔가 같은 :

$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) { 
    $(this).children('.game-info-text').slideToggle("Slow"); 
    $('.more-info-header').not(this).children('.game-info-text').slideUp(fast); 
    //      ^-- removes the clicked element from all `.more-info-header` 
}); 

참조 : .not()

+0

감사합니다. 매력적입니다. –

1

jQuery UI Accordion 플러그인을 사용중인 것 같습니다.

+0

Chris에게 문의 해 주셔서 감사합니다. 이 부분을 살펴 보겠습니다 ... Accordion 플러그인을 이미지 헤더와 기타 등등으로 작업 할 수 있습니까? –

+0

모든 jQuery UI 플러그인은 고도로 스킨 가능합니다. 데모 페이지의 오른쪽 상단을 확인하면 '테마'드롭 다운 메뉴가 표시됩니다. plain ol 'CSS를 사용하여 모든 jQuery 플러그인에 대한 자신 만의 테마를 정의 할 수 있습니다. 그들은 심지어 조금 더 쉽게 초기 땜질 만들기 위해 자신의 테마 생성기 롤 : http://jqueryui.com/themeroller/ – Chris

1
$('.more-info-header:not(.jquery-processed)') 
.addClass('jquery-processed').click(function(e) { 
    var these = $(this).children('.game-info-text').slideToggle("slow"); 
    $('.game-info-text').not(these).slideUp("fast"); 
}); 

not() 기능을 사용하면 이미 선택된 요소를 제외 할 수 있습니다.

+0

답변 주셔서 감사합니다 - 정말 고마워! –

1

이와같이?

$('.more-info-header').click(function(e){ 
    var target = e.target || e.srcElement; 
    $(this).children().not(target).find('.game-info-text').slideUp('fast'); 
    $('.game-info-text', target).slideToggle("slow"); 
    }); 
+0

답변을 주셔서 감사합니다! –

관련 문제