添加更多或更少+/-

我試圖設置這個代碼，它可以顯示更多或更少的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>

正如點擊「Menu」正確顯示或隱藏文本。你如何添加一個函數來使其顯示+/-或類似的多或少以提示訪問者？

來源

2014-10-19 Bob M

有。首先添加+/- ...然而你想要...然後找出一個函數來改變它。 – 2014-10-19 19:56:34

你可以添加一個元素來保存加號，然後直接切換，就像這樣 - > ** http：//jsfiddle.net/vmeL71jr/** – adeneo 2014-10-19 20:10:31

這就是精彩的@adeneo 2.比我的回答好得多。 – 2014-10-19 22:16:48

一個簡單的方法來實現這一目標是如下初始化「菜單」「+菜單」：

<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

中沒有「功能」明確

來源

2014-10-19 20:21:32

這很完美。現實生活中的情況要穩健得多，但我測試了這一點，它會發揮出色。謝謝。 – 2014-10-19 22:48:17

很高興聽到這一點。我知道你是新來的，但習慣上接受最有幫助的答案。 – 2014-10-20 14:21:50

添加更多或更少+/-

回答

相關問題