더 나은 JQuery 토글 스위치?

간단 토글 + EXPAND/-COLLAPSE 토글 스위치를 만들려고합니다. 시작시더 나은 JQuery 토글 스위치?

html로 :

<div class="ttoggle"> 
    <div class="expand">+ EXPAND</div> 
    <div class="collapse hide">- COLLAPSE</div> 
</div>

CSS :

.hide { display:none;}

JQuery와 :

var x="collapse"; 
$('.ttoggle').click(function() { 
    if(x=="collapse") { 
    $(this).find('.'+x).removeClass("hide"); 
    $(this).find('.expand').addClass("hide"); 
     x="expand"; 

    } else if(x=="expand") { 
     $(this).find('.'+x).removeClass("hide"); 
     $(this).find('.collapse').addClass("hide"); 
     x="collapse"; 
    } 

});

이, 내가 생각을 작성하는 끔찍한 방법입니다 토글 코드를 사용하면 무거워 보입니다. 상태를 등록 할 변수 ...이 작업을 수행하는 더 좋고/더 가벼운 방법이어야합니다 .... 모든 힌트 ?? 감사!

출처

2013-06-10 Roon

하나의 항목 만 토글 하시겠습니까? 아니면 접을 수있는 메뉴 같은 것입니까? – KyleK

스위치를 클릭 할 때 내부 HTML을 바꾸지 않는 이유는 무엇입니까? 아니면 div 스타일이 다릅니 까? (색상 등) – KyleK

정확하게 이해했다면 ttoggle을 클릭하여 + EXPAND를 먼저 표시 한 다음 클릭하면 -COLLAPSE가 표시됩니다. 다시 클릭하면 + EXPAND가 다시 표시됩니다.

이 작업을 수행 할 수 있습니까?

$('.ttoggle').click(function() { 
    $(this).find('.expand, .collapse').toggleClass('hide'); 
}

출처

2013-06-10 00:10:27 Bemmu

예! 매력처럼 작동합니다 ... 정확히 내가 원하는 것입니다 - 더 가벼운 코드! 완전한. 감사 Bemmu! – Roon

코드가 귀하의 질문에 답변하고 귀하의 필요를 충족시키는 경우 귀하의 질문에 대한 답변으로 선택하는 것이 좋습니다. – BjornJohnson

여기에서 영감을 일부 라이브러리 코드를보고 할 수 있습니다. 많은 UI 라이브러리에는 토글 구성 요소가 있습니다. 가치가 가장 잘 저장된 위치는 나머지 프런트 엔드에 따라 다릅니다. 예를 들어 Backbone 프레임 워크를 사용하는 경우 Backbone.View는 토글 상태를 저장해야합니다. 또는 형식으로 제출할 경우 숨겨진 입력에 토글 상태를 저장하십시오. 부트 스트랩의 버튼은 잘 생각하고, 그들이 토글 하나 있습니다

HTML

<div id="MyToggle" data-isCollapsed="true">Expand</div>

: 일회성 케이스 http://twitter.github.io/bootstrap/components.html#buttonGroups

을, 나는 같이 데이터 속성 또는 숨겨진 입력을 제안 JS

$('#MyToggle').click(function(){ 
    $(this).data('isCollapsed') = ! $(this).data('isCollapsed') 
})

출처

2013-06-10 00:14:32 SimplGy

감사합니다. – Roon

더 나은 JQuery 토글 스위치?

답변

관련 문제