如何在jQuery手風琴上添加正負號

Question

我有以下簡單的html代碼：

   <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編程的新手，希望您能對我有所幫助。 謝謝 ：-）

Answer 1

您應該將JQueryUI與自定義圖標一起使用。 您可以在下面的鏈接中找到它： http : //jqueryui.com/accordion/#custom-icons

也請看一下這個問題可能對您有幫助： 如何自定義加/減jQuery UI手風琴圖像

$(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 );
  }
}); });

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

Answer 2

嘗試使用委派給h3.ui-accordion-header click事件； 如果元素具有class .ui-state-active並將.panel-icon文本設置為"-" ，則使用.each()迭代h3.ui-accordion-header元素。否則，將.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> 

Answer 3

您應該將css用於圖標，將jquery用於功能。 您不需要jquery-ui來添加和刪除圖標。 如果您已經這樣做，那么就足夠了，但是為了將來，這是僅使用JQuery和CSS的一個很好的解決方案。

有關示例，請參見此處的jsfiddle。

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

該示例將其擴展為一個工作示例，對其進行了簡化，並且我使用背景色來表示打開和關閉狀態，因為我沒有方便使用的圖標，但是您可以看到JQuery如何切換定義您的樣式的css類打開和關閉按鈕。

這樣做的好處是將樣式保留在CSS所屬的CSS中。 這使得將來更容易將圖標更改為純CSS或sprite。 這也使得在不需要JQuery的情況下更輕松地重用其他樣式。