JQuery를 사용하여 div 가시성 전환

Question

Div 가시성을 토글하기 위해 jquery 코드를 작성하고 있습니다. 나는 여기 게시 된 방법을 따랐다 : http://jsfiddle.net/Ga7Jv/.

사용자가 이미지 (H2 태그 옆)를 클릭하면 해당 div를 토글합니다. 여기

$(function() 
{ 
$(".expander").live('click', function(){ 
     $(this).next("#TableData").slideDown(); 
     $(this).removeClass('expander'); 
     $(this).addClass('expanded'); 
}); 

$(".expanded").live('click', function(){ 
     $(this).next("#TableData").slideUp(); 
     $(this).removeClass('expanded'); 
     $(this).addClass('expander'); 
}); 

는 HTML입니다 : 여기

은 JQuery와입니다

<h3><img src="toggle.png" class ="expander" alt="Expand"/> 
Tabular Data</h3> 
<div id="TableData"> 
//Content 
</div> 

는 IS 클래스 확장에 적용되는 CSS와 나는 그 CSS를 변경 표시되는 버튼 등을 클릭하면 나는 기대할 것이다. 그래서 코드는 토글 버튼을 찾고 클래스를 바꿀 것이라고 가정합니다.

그러나 필요한 조치를 수행하지 않습니다. div를 해당 클래스에 따라 위 또는 아래로 슬라이드하는 것입니다.

내가 이것을 달성하기 위해 노력했습니다 다른 방법이 함께 :

$(function(){ 
    $('.expander').live('click',function(){ 
    $('#TableData').show(); 
    $('#TableData').hide(); 
     }); 

에만 사업부를 닫고 내가 그것을 클릭하면 다시 열리지 않습니다. 나는 또한 그것을 가지고 있었기 때문에 잘 닫았지만 그것을 열면 즉시 닫힙니다. 코드와

감사

Answer 1

문제 때문에 항상 사업부

단순히 .toggle()을 사용하여이 일치하는 요소를 표시하거나 숨길 수를 숨길 것, 마지막으로 함수 호출 .hide() 것입니다.

$(function(){ 
    $('.expander').live('click',function(){ 
     $('#TableData').toggle(); 
    }); 
}); 

Fiddle

또는

$(function() { 
    $('.expander').live('click', function() { 
     $('#TableData').slideToggle(); 
    }); 
}); 

Fiddle with slide

표시하거나 슬라이딩 동작과 일치하는 요소를 숨기려면 당신은 .slideToggle()을 사용할 수 있습니다

Answer 2

함수 안에 div가 표시되고 다시 숨 깁니다.

.toggle() 함수를 호출하여 상태를 바꿀 수 있으므로 jQuery는 그 상태를 표시하거나 숨길 수 있습니다.

Answer 3

동일한 요소에서 클래스 이름을 전환하려면 다른 클래스를 고정 클래스로 유지하고 다른 클래스를 계속 변경하는 것이 좋습니다.

이

$(function(){ 
    $(".toggler").on("click", function(){ 
     $(this) 
     .toggleClass("expander expanded") 
     .parent().next().slideToggle(); 
    }); 
}); 

TIP : 여기 .toggler

• 트리거 요소에 대한 고정 클래스 내가이에 .expander 및 .expanded 클래스를 전환하고 여기

  내가 말하고있는 것입니다 그것.

• 또한 slideToggle의 요소를 잘못 선택했습니다. #TableData는 .parent().next()입니다.

Working Demo는 : http://jsfiddle.net/ashishanexpert/nuw2M/1/

Answer 4

이 바이올린은 사업부 내부 사업부를 전환하는 방법을 보여줍니다.

Toggle div inside the div

$('.toggle').click(function(){ $('.showMe').slideToggle('slow'); });