嵌套手风琴向上/向下箭头问题答案

【问题标题】：Nested Accordion Up/Down Arrow Issues嵌套手风琴向上/向下箭头问题
【发布时间】：2016-01-28 23:17:03
【问题描述】：

我正在尝试在手风琴上添加一个箭头，以显示它是打开还是关闭。用于主手风琴和嵌套手风琴。（现在我使用了文本）。

当您单击当前打开或父打开手风琴时，代码可以正常工作。但是当您单击其他内容而不关闭当前打开的项目时，它会变得很不稳定。

我尝试在 JS 中的任何地方添加一个 removeClass 表示“slideUp”，并添加一个 addClass 表示“slideDown”。我认为这可以作为上滑/下滑控制 div 是否显示。

我遗漏了一些东西，但不确定是什么。

<script>
$(document).ready(function () {
    var parentDivs = $('.nestedAccordion div'),
        childDivs = $('.nestedAccordion h6').siblings('div');

    $('.nestedAccordion h5').click(function () {
        parentDivs.slideUp();
        $(this).removeClass( "open" );
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
            $(this).addClass( "open" );
        } else {
            $(this).next().slideUp();
            $(this).removeClass( "open" );
        }
    });

    $('.nestedAccordion h6').click(function () {
        childDivs.slideUp();
        $(this).removeClass( "open" );
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
            $(this).addClass( "open" );
        } else {
            $(this).next().slideUp();
            $(this).removeClass( "open" );
        }
    });
});
</script>

HTML

<div class="nestedAccordion">
    <h5>ingredients found in our products</h5>
    <div style="display:none;">
         <h6>Lavender</h6>
         <div>Hair</div>
         <h6>Panthenol (Plant derived)</h6>
         <div>Hair</div>
    </div>
</div>

<hr/>

<div class="nestedAccordion">
    <h5>ingredients NOT found in our products</h5>
    <div style="display:none;">
         <h6>Lavender</h6>
         <div>Hair</div>
         <h6>Panthenol (Plant derived)</h6>
         <div>Hair</div>
    </div>
 </div>

CSS

.nestedAccordion h5::before {
    color: red;
    content: "down arrow ";
}
.nestedAccordion h5.open::before {
    color: orange;
    content: "up arrow ";
}
.nestedAccordion h6::before {
    color: blue;
    content: "down arrow ";
}
.nestedAccordion h6.open::before {
    color: lime;
    content: "up arrow ";
}

【问题讨论】：

标签： jquery accordion

【解决方案1】：

试试这个：

var parentDivs = $('.nestedAccordion div'),
        childDivs = $('.nestedAccordion h6').siblings('div');


$('.nestedAccordion h5').click(function () {
    $('.nestedAccordion h5').removeClass("open");
    $('.nestedAccordion h6').removeClass("open");
    parentDivs.slideUp();

  //  $(this).removeClass( "open" );
    if ($(this).next().is(':hidden')) {
        $(this).next().slideDown();
        $(this).addClass( "open" );
    } else {
        $(this).next().slideUp();
        $(this).removeClass( "open" );
    }
});

$('.nestedAccordion h6').click(function () {
       $('.nestedAccordion h6').removeClass("open");
        childDivs.slideUp();
       // $(this).removeClass( "open" );
        if ($(this).next().is(':hidden')) {
            $(this).next().slideDown();
            $(this).addClass( "open" );
        } else {
            $(this).next().slideUp();
            $(this).removeClass( "open" );
        }
    });

http://jsfiddle.net/3k0vLdt4/1/

【讨论】：

谢谢！这就像一个魅力。我看到像您所做的那样添加单独的删除类如何解决问题。