2010-02-10 5 views
2

jQuery를 사용하여 div onclick을 표시하고 숨기려고합니다. 오류가 발생하지는 않지만 아무것도 표시하거나 숨기지 않습니다.jquery 클릭하면 div 표시/숨기기?

** 수정 - 업데이트 **

$(document).ready(function() {  
     $("#nav-inner a").click(function() { 
      var type = $(this).attr("class"); 
       $("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show(); 
       return false; 
    }); 

});

다음은 jQuery의 :

$(document).ready(function() { 
     if($("#nav-inner")) { 
       $("#nav-inner ul li a").click(function(evt) { 
         var type = $(this).attr("class"); 
         var rowcount = 0; 
         $('div.v1 .vc').each(function(idx,el) { 
           if(type == 'typea') { 
            if($(el).hasClass('typea')) { 
               $(el).show(); 
             } else { 
               $(el).hide(); 
             } 
           } 
         }); 
        }); 
    } 
}); 

그리고 여기에 마크 업의이 훨씬 간단 할 수

<div id="page"> 
    <div id="header"> 
     <div id="nav"> 
      <div id="nav-inner"> 
       <ul class="nav-inner-li"> 
        <li> 
         <a class="typea" href="#"><img src="/images/typea.png"></a> 
         <a class="typea" href="#">Type A</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div id="content"> 
     <div id="content-content"> 
      <div id="content-left"> 
       <div class="v1"> 
        <div class="vc"> 
         <div class="typea"> 
          <div class="title"> Title </div> 
          <div class="body"> Body </div> 
         </div> 

         <div class="typeb"> 
          <div class="title"> Title 2 </div> 
          <div class="body"> Body 2 </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

답변

4

. #nav-inner 실제로 ul 요소입니다

$(function() { 
    $("#nav-inner a").click(function() { 
    var type = $(this).attr("class"); 
    $("div.vc > div").not("." + type).stop().hide() 
     .end().filter("." + type).stop().show(); 
    return false; 
    }); 
}); 

첫 번째 오류가 #nav-inner ul했다. 위의 클래스는 클릭 한 링크에서 클래스를 가져온 다음 해당 클래스로 div.v1의 하위 항목을 선택하고 전환합니다 (숨겨진 경우 표시하고 그렇지 않은 경우 숨김).

+0

나는 항상 false 대신 반환) e.preventDefault를 (사용합니다. 내가 틀렸다면 나를 정정하되 false를 반환하지 않으면 현재 요소의 이벤트 만 취소 하시겠습니까? preventDefault()는 이벤트 체인을 중지합니까? – fredrik

+0

고마워요 ... 일종의 일종 ... 그 클래스를 가진 div를 제외한 모든 것을 숨길 필요가 있다는 것을 제외하고는. 그래서 를 클릭하면 typea div가 표시되고 다른 모든 항목이 숨겨집니다 ... 반대쪽을 수행하는 것처럼 보입니다 ...? – phpN00b

+0

@fredrik :'return false'는'preventDefault()'**와 **'stopPropagation()'과 동일합니다. – cletus

1

이 간단한 예입니다 ..

<script> 
     $(document).ready(function(){ 
      $('#divtag').click(function(){ //use # for id and . for class 
       $('#insidetag').show();  // with parameters slow,fast, or a time in milisecond 
      });        // use toggle to show and hide 
     }); 
    </script> 

<body> 
    <div id="divtag"> 
     <div id="insidetag"> 
      Click the hide and show 
     </div> 
    </div> 
</body> 

+0

간단한 설명 // ID를 위해 #를 사용하고 수업을 위해 시간을 절약 해주었습니다. 감사합니다. 재능 감사합니다! – Amod

0

jQuery(".user-profile-info").unbind().click(function(){ 
    if(jQuery(".user-profile-info").hasClass("collapsed")){ 
     jQuery('#user-profile-submenu').css('display', 'block'); 
     jQuery(".user-profile-info").removeClass("collapsed"); 
    } 
    else 
    {  
     jQuery(".user-profile-info").addClass("collapsed"); 
     jQuery('#user-profile-submenu').css('display', 'none'); 
    } 
}); 
+0

Content of click