如何在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的情况下更轻松地重用其他样式。