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中的accordion函数来打开和关闭每个标题下的内容：

$(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

请同时查看此问题可能有所帮助： 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 );
  }
}); });

使用icons选项自定义标题图标，该选项接受标题的默认和活动（打开）状态的类。使用UI CSS框架中的任何类，或使用背景图像创建自定义类。

Answer 2

尝试将click事件授权给h3.ui-accordion-header;使用h3.ui-accordion-header迭代.each()个元素，如果元素有class .ui-state-active将.panel-icon文本设置为"-"，则将.panel-icon文本设置为"+"

＆＃13;

$(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") ? "-" : "+")
    })
  });

});

＆＃13;

<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>

＆＃13;

Answer 3

你应该使用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的情况下在其他地方重用样式变得更容易。

如何在jquery手风琴中添加加号/减号

3 个答案: