jquery - 如何向 jquery Accordion 添加加号/减号

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,});
});

Accordion 本身工作得很好。但是，我不知道如何根据是否显示内容在加号和减号图标之间切换。

我认为代码可能是这样的:

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

尝试使用委托(delegate)给 h3.ui-accordion-header 的 click 事件；使用 .each() 迭代 h3.ui-accordion-header 元素，如果元素有 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>