+/- icon jQuery Sub-Accordion（父母与子女元素）

Question

我用父元素和子元素创建了以下jQuery Accordion：

jQuery的：

/* Accordion with +/- icon */

/* Parent Elements */

$(document).ready(function() {
  $(".accordion_parent").accordion({
    collapsible: true,
    active: false,
    animate: 500,
  }).on("click", "div", function(e) {
    $("div.ui-accordion_parent-header").each(function(i, el) {
      if ($(this).is(".ui-state-active")) {
        $(this).find(".panel-icon").html("-")
      } else {
        $(this).find(".panel-icon").html("+")
      }
    })
  });

});


/* Children Elements */

    $(document).ready(function() {
      $(".accordion_child").accordion({
        collapsible: true,
        active: false,
        animate: 500,
      }).on("click", "div", function(e) {
        $("div.ui-accordion_child-header").each(function(i, el) {
          if ($(this).is(".ui-state-active")) {
            $(this).find(".panel-icon").html("-")
          } else {
            $(this).find(".panel-icon").html("+")
          }
        })
      });

    });

在评论的JSFiddle中，您可以看到整个代码，包括HTML和CSS。 jQuery以及HTML和CSS代码分为父元素和子元素的代码。 在将儿童元素包含在手风琴中后，+ / - 图标不再起作用。这可能是jQuery代码中的行（＆＃34; div.ui-accordion_parent-header＆＃34;）和（＆＃34; div.ui-accodrion_children-header＆＃34;）的问题。如何使+/-图标同时适用于父元素和子元素？

Answer 1

以下是创建手风琴的简单解决方案

js-fiddle

• 使用.slideToggle()进行滑动
• 使用伪类根据类
添加+和-符号

$(document).ready(function() {
  $(".js_button_parent").on('click', function() {
    $(this).next('.panel_parent').slideToggle();
    $(this).toggleClass('active');
  });
});

.accordion_parent {
  float: left;
  line-height: 2.0;
  width: 100%;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  margin-top: 1%;
}
.js_button_parent {
  width: 100%;
  padding-left: 1%;
  font-weight: bold;
  outline-width: 0;
  position: relative;
  box-sizing: border-box;
}
.js_button_parent:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #000;
}
.panel_parent {
  width: 99%;
  padding-left: 1%;
  font-weight: bold;
  overflow: hidden;
  display: none;
}
/* Accordion Children */

.accordion_child {
  float: left;
  line-height: 2.0;
  width: 99%;
  border-style: solid;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  margin-top: 1%;
}
.js_button_child {
  width: 100%;
  padding-left: 1%;
  font-weight: bold;
  outline-width: 0;
  position: relative;
  box-sizing: border-box;
}
.js_button_parent:before {
  content: '+';
  width: 20px;
  display: inline-block;
}
.js_button_parent.active:before {
  content: '-';
}
.js_button_child:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #000;
}
.panel_child {
  width: 99%;
  padding-left: 1%;
  font-weight: bold;
  overflow: hidden;
}
.panel-icon {
  float: left;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion_parent">
  <div class="js_button_parent">Parent1</div>
  <div class="panel_parent">
    <div class="accordion_parent">
      <div class="js_button_parent">Child1</div>
      <div class="panel_parent">
        <p>Child1 Content</p>
      </div>
    </div>
    <div class="accordion_child">
      <div class="js_button_parent">Child2</div>
      <div class="panel_parent">
        <p>Child2 Content</p>
      </div>
    </div>
  </div>
</div>
<div class="accordion_parent">
  <div class="js_button_parent">Parent2</div>
  <div class="panel_parent">
    <p>Parent2 Content</p>
  </div>
</div>