2014-10-19 3 views
0

나는이 코드를 설정하여 panel_menu 내의 모든 것을 표시하거나 메뉴 버튼 옆에 + 또는 - 텍스트를 표시하지만이 방법을 사용하지는 않습니다. jQuery에서 그렇게해라. 내가 본 예는 내가 여기있는 것과 다르다.더 많거나 적음 더하기 +/-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 
    $("#toggle_menu").click(function(){ 
    $("#panel_menu").slideToggle(0); 
    }); 
    }); 
</script> 

<style> 
    h3 { padding: 5px; cursor: pointer; margin: 0px; } 
    h3:hover { color: #ff0000; background: #eee; } 
    #toggle,#toggle_menu { padding: 5px; } 
    #panel_menu { margin: 0px; display:none; padding: 5px; } 
</style> 

<h3 id="toggle_menu">Menu </h3> 
<div id="panel_menu"> 
Lorem ipsum dolor sit amet 
</div> 

"메뉴"를 클릭하면 텍스트가 올바르게 표시되거나 숨겨집니다. +/- 또는 더 비슷하거나 더 비슷하게 방문자를 단서하게하는 함수를 어떻게 추가합니까?

+0

. +/- first ...를 추가하십시오. 그러나 원하는 것이 있다면 ... 변경하는 함수를 찾으십시오. –

+1

더하기 기호가있는 요소를 추가 한 다음이를 토글합니다. -> ** http : //jsfiddle.net/vmeL71jr/** – adeneo

+0

그것은 훌륭한 대답입니다. 2. 내 대답보다 훨씬 낫습니다. –

답변

0

이를위한 간단한 방법은 다음과 같이 "메뉴" "+ 메뉴"를 초기화한다 : 즉 아니오 '기능'거기

<h3 id="toggle_menu">+ Menu </h3> 

... 

$(document).ready(function() { 
    var tm = $("#toggle_menu"); 
    tm.on('click', 
    function() { 
     $("#panel_menu").slideToggle(0); 
     if(tm.text() == '- Menu') tm.text('+ Menu') 
     else tm.text('- Menu'); 
    } 
); 
}); 
jsfiddle

+0

그게 완벽합니다. 실생활의 상황은 훨씬 강력하지만, 나는 이것을 시험해 보았고 놀랍도록 작동 할 것이다. 고마워. –

+0

듣기가 좋다. 나는 네가 그렇게 새롭다는 것을 이해하지만 가장 도움이되는 대답을 받아들이는 것이 관례이다. –

관련 문제