嵌套手风琴 Up/Down 箭头问题

Question

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

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

我试图在 JS 中的任何地方添加一个 removeClass，即 'slideUp'，并在它说 'slideDown' 的地方添加一个 addClass。我认为这会起作用，因为 slideUp/Down 控制 div 是否显示。

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

JS

<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 ";
}

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

嵌套手风琴 Up/Down 箭头问题

Nested Accordion Up/Down Arrow Issues

jquery

accordion