jQuery - div 클래스를 클릭시 토글

Question

아니요, 이것은 곧장 앞으로 전환되는 질문이 아닙니다. 나는 toggle() 함수와 단순히 div를 숨기거나 표시하는 방법을 알고있다. 내부 레이블 상자를 상상해 : 당신이 전체 사업부의 아무 곳이나 클릭하면 수업 hidden를 제거해야

<div class="section hidden"> 
    <div class="section-legend">My Section</div> 
</div> 

. 상자가 펼쳐집니다. 상자가 클래스 hidden이 아니므로 클릭 할 수 없습니다.

대신 을 클릭하면 hidden 클래스를 주 div에 다시 추가해야합니다. 분명히 범례의 click 이벤트는 stopPropagation()을 필요로합니다. 이제 범례를 더 이상 클릭 할 수 없어야하며 다시 한번 전체 div를 클릭하여 열어야합니다.

내가 제대로 작동하려면 아무것도 얻을 수 없다, 나는이 바보 같은 코드를 알고 :

$(document).ready(function() { 

    $('.section.hidden').click(function() { 
     $(this).removeClass('hidden'); 
     $(this).find('.section-legend').click(function(e) { 
      $(this).parent().addClass('hidden'); 
      e.stopPropagation(); 
     }); 
    }); 

    $('.section-legend').click(function(e) { 
     $(this).parent().addClass('hidden'); 
     e.stopPropagation(); 
     $(this).parent().click(function() { 
      $(this).removeClass('hidden'); 
     }); 
    }); 

});

Answer 1

$('.section-legend').live('click',function(){ 
    $(this).parent().toggleClass('hidden'); 
}); 

이것은 섹션 - 범례가 '숨겨진 상태'의 컨테이너와 동일하다고 가정합니다.

편집이 : 몇 가지 코드를 변경, 해결책은 이것이다 :

$('.section').live('click',function(){ 
    $(this).removeClass('hidden'); 
}); 
$('.section-legend').live('click',function(){ 
    $(this).parent().toggleClass('hidden'); return false; 
}); 

return false 트릭을했다! 데모 : http://jsfiddle.net/RUfN7/2/

Answer 2

먼저 클릭 필요가 사업부에 onclick 이벤트 추가 :

<div id="myDiv" class="section hidden"> 
    <div class="section-legend" onclick="function1();">My Section</div> 
</div> 

을 그리고

<script language="JavaScript"> 
    function function1(){ 
     document.getElementById("myDiv").removeAttribute("class"); 

    } 
</script> 

Answer 3

$('.section').click(function() { 
    $(this).removeClass('hidden'); 
}); 

$('.section-legend').click(function(e) { 
    var $parent = $(this).parent(); 
    if(!$parent.hasClass('hidden')) { 
     $parent.addClass('hidden'); 
     return false; 
    } 
});