이전에 토글 된 모든 요소 숨기기

jQuery를 통해 페이지의 숨겨진 부분을 열고 닫는 사이드 바 메뉴가 있습니다. 이 링크는 숨겨진 내용을 사라지게하고 클래스를 링크에 추가하거나 제거합니다. 그래서 예제 HTML/CSS를이전에 토글 된 모든 요소 숨기기

<ul> 
<li><a class="linkOne" href="#">Link One</a></li> 
<li><a class="linkTwo" href="#">Link Two</a></li> 
</ul> 

<div class="linkOneBox">Stuff</div> 
<div class="linkTwoBox">Stuff</div> 

<style type="text/css"> 
.linkOneBox,.linkTwoBox {display:none} 
.current {background: #fff} 
</style>

와 jQuery를 뭔가 같은 ..에 대한 어쨌든

$('.linkOne').click(function() { 
    $('.linkOneBox').fadeToggle(); 
    $(this).toggleClass('current'); 
    return false; 
    });

.. 내 질문에 내가 토글을 사용하고 있기 때문에, 모두가 할 수있는 가장 좋은 방법은 무엇이며, 열려있는 나머지 토글은 꺼진 상태로 재설정됩니까? 새 링크를 클릭하면 이전에 열린 창을 모두 숨기고 .current를 제거하는 방법은 어떻게됩니까? 그런 다음

<ul id="menu"> 
    <li><a href="#b1">Link One</a></li> 
    <li><a href="#b2">Link Two</a></li> 
</ul> 

<div class="box" id="b2">Stuff</div> 
<div class="box" id="b1">Stuff</div>

출처

2009-10-04 Zac

내가 먼저 HTML에 몇 가지 변경을 할 것

$(document).ready(function(){ 

    // Initially hide the boxes 
    $('.box').hide(); 

    $('#menu a').click(function(){ 

     $('#menu a').removeClass(); // Remove 'current' class from any links 
     $('.box:visible').fadeToggle(); // Hide all previously visible boxes 

     // Fade in the box where the id is the same as the href of the clicked link 
     $($(this).attr('href')).fadeToggle(); 
     $(this).addClass('current'); // And highlight the menu link 

     return false; 
    }); 

});

가 중복 조금있다, 그래서 대신에 당신은 할 수 있습니다 만 hide() 오픈을에 . 당신 전에 상자 내가 마크 동의

출처

2009-10-04 08:32:11

예! 정말 고마워. 내가 가고 있었던 길보다 훨씬 효율적이다. 겹치는 부분에 대한 의견에 대해서는 ... $ ('. box'). 숨기기(); 초기 깜박 거림을 막기 위해 스크립트가로드되는 동안 CSS가 보이지 않도록 숨기고 싶습니다. 그런 다음 js가있는 사람들을 위해 뭔가 다른 것을 갖게 될 것입니다. – Zac

각 링크가 항상 켜지면서 토글을 잃어 버렸습니다. 각 윈도우의 닫기 버튼을 추가했지만 토글 기능을 유지하는 방법에 대한 아이디어가 있으면 듣고 싶습니다. :) – Zac

예, 모두 했어요. * 처음에는 상자를 숨기는 것이 었습니다 - $ ('box : visible')를 변경하면 fadeToggle(); ~ $ ('box : visible'). hide() 그러면 더 좋을 것 같습니다. 또한 처음 $ ('. box'). hide()를 .box div 바로 뒤에있는 cript 블록으로 옮기면 깜박임을 피하고 비 JS 사용자를 위해 열어 두어야합니다. –

의 새로운 하나를 퇴색하지만, 사용 :

$(this).addClass('current');

토글 클라스는 클래스가 존재하는지 먼저 확인하기 때문에.

출처

2009-10-04 10:20:20 fredrik

감사합니다 fredrik ... 당신은 본질적으로 토글을 무의미하게 만들 것입니다. – Zac

네, 잘 잡으십시오 - 제 대답을 편집하여 제안을 고려했습니다. –

이전에 토글 된 모든 요소 숨기기

답변

관련 문제