如何將正/負號添加到一個jQuery的手風琴

我有以下簡單的HTML代碼：如何將正/負號添加到一個jQuery的手風琴

<div id="menu"> 

     <h3><span class="panel-icon">+</span> Slide up/down</h3> 
     <span class="panel"> 
     <p>Now you see me!</p> 
     </span> 

     <h3><span class="panel-icon">+</span> Slide Up/Down</h3> 
     <span class="panel"> 
     <p>Now you see me!</p> 
     </span> 

    </div>

和我使用jQuery的手風琴函數打開每個標題下關閉該內容：

$(document).ready(function(){ 
    $("#menu").accordion({collapsible: true, active: false, animate: 500,}); 
});

手風琴本身完美運作。但是，我不知道如何顯示或不顯示內容時，如何在加號和減號圖標之間切換。

我認爲代碼可能是這樣的：

$(document).ready(fucntion(){ 

    if ((".panel") == visibility = collapse) { 
    $(".panel-icon").html("-"); 
    } 
    else if ((".panel1") == visibility = hidden){ 
    $(".panel-icon").html("+"); 
    } 

});

或者也可以是類似這樣：

$(document).ready(function(){ 
     $('.panel-icon').text(function(_, txt) { 
     return txt === "+" ? "-" : "+"; 
     }); 
});

我是很新的jQuery的節目，所以我希望你能幫忙我。謝謝:-)

來源

2015-07-05 Michi

嘗試使用污點click將事件委託給h3.ui-accordion-header;迭代h3.ui-accordion-header元素與.each()，如果元素有class.ui-state-active設置.panel-icon文本"-"，否則設置.panel-icon文本"+"

$(document).ready(function() { 
 
    $("#menu").accordion({ 
 
    collapsible: true, 
 
    active: false, 
 
    animate: 500 
 
    }).on("click", "h3.ui-accordion-header", function(e) { 
 
    $("h3.ui-accordion-header").each(function(i, el) { 
 
    $(this).find(".panel-icon").text($(el).is(".ui-state-active") ? "-" : "+") 
 
    }) 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="menu"> 
 

 
    <h3><span class="panel-icon">+</span> Slide up/down</h3> 
 
    <span class="panel"> 
 
     <p>Now you see me!</p> 
 
     </span> 
 

 
    <h3><span class="panel-icon">+</span> Slide Up/Down</h3> 
 
    <span class="panel"> 
 
     <p>Now you see me!</p> 
 
     </span> 
 

 
</div>

來源

2015-07-05 08:37:27 guest271314

工程就像一個魅力，謝謝 –

您應該使用帶有自定義圖標的JQueryUI。你可以找到它下面的鏈接： http://jqueryui.com/accordion/#custom-icons

也請對這個問題一起來看看它可能會幫助： How to customize the plus/minus jQuery UI accordion images

$(function() { 
var icons = { 
    header: "ui-icon-circle-arrow-e", 
    activeHeader: "ui-icon-circle-arrow-s" 
}; 
$("#accordion").accordion({ 
    icons: icons 
}); 
$("#toggle").button().click(function() { 
    if ($("#accordion").accordion("option", "icons")) { 
    $("#accordion").accordion("option", "icons", null); 
    } else { 
    $("#accordion").accordion("option", "icons", icons); 
    } 
}); });

定製與圖標的選項，它接受類的頭圖標標題的默認和活動（打開）狀態。使用UI CSS框架中的任何類，或使用背景圖像創建自定義類。

來源

2015-07-05 08:02:20

你應該使用css作爲你的圖標和jQuery的功能。你不需要jquery-ui添加和刪除圖標。如果你已經這麼做了，那麼就足夠公平了，但對於未來，只有JQuery和CSS是一個很好的解決方案。

見the jsfiddle here for an example

openCloseButton.removeClass('is-closed').addClass('is-open');

的例子esxpands到這個工作的例子，它的簡化，我使用的背景顏色來表示打開和關閉狀態，因爲我沒有圖標方便，但你可以看到JQuery如何切換定義打開和關閉按鈕樣式的css類。

這樣做的好處是你可以將樣式保留在css中，它屬於哪裏。這使得將來可以更容易地將圖標更改爲純CSS或精靈。它還使得在不需要JQuery的情況下在其他地方重新使用樣式變得更加容易。

來源

2015-07-05 08:30:31

如何將正/負號添加到一個jQuery的手風琴

回答

相關問題