Question

我有以下jQuery Accordion，其中我还想要包含一个Sub-Accordion：

jQuery的：

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

HMTL：

<div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Parent1</div>
    <div class="panel">

        <div class="accordion">
        <div class="js_button"><span class="panel-icon">+</span>Child1</div>
        <div class="panel">
        <p> Child1 Content </p>
        </div>

        <div class="accordion">
        <div class="js_button"><span class="panel-icon">+</span>Child2</div>
        <div class="panel">
        <p> Child2 Content </p>
        </div>

    </div>

</div>

<div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Parent2</div>
    <div class="panel">
    <p>Parent2 Content</p>
    </div>
</div>

CSS：

.accordion {
    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 {
    width: 100%;
    padding-left: 1%;
    font-weight: bold;
    outline-width: 0;
    position: relative;
    box-sizing: border-box;
}
.js_button:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}
.panel {
    width: 99%;
    height: 20%;
    padding-left: 1%;
    font-weight: bold;
    overflow: hidden;
}
span.panel-icon {
    float: left;
    width: 10px;
}

如您所见，HTML的第一部分（“Parent1”）包含两个子元素（“Child1”和“Child2”）。父元素完美地工作，但是一旦我将孩子们包含与父母完全相同的代码，手风琴就不再起作用了。如何将孩子正确地包含在我的手风琴中，或者我需要做些什么来更改子元素的代码呢？

感谢您的帮助： - ）

Answer 1

你的一些div没有正确关闭，手风琴也在工作，但它不仅仅是可见的。将height: 20%课程的panel更改为height: 40%将解决您的问题。

Working demo

CSS：

.panel {
    width: 99%;
    height: 40%;
    padding-left: 1%;
    font-weight: bold;
    overflow: hidden;
}

HTML：

<div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Parent1</div>
    <div class="panel">

        <div class="accordion">
          <div class="js_button"><span class="panel-icon">+</span>Child1</div>
            <div class="panel">
              <p> Child1 Content </p>
            </div>
        </div>


        <div class="accordion">
          <div class="js_button"><span class="panel-icon">+</span>Child2</div>
            <div class="panel">
              <p> Child2 Content </p>
            </div>
       </div>

    </div>

</div>

<div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Parent2</div>
    <div class="panel">
    <p>Parent2 Content</p>
    </div>
</div>

子手风琴jQuery

1 个答案: