Question

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

单击当前打开或父打开的手风琴时，代码可以正常工作。但是当你在没有关闭当前打开项目的情况下点击其他东西时，它会变得很糟糕。

我试图在JS中的任何地方添加一个名为“slideUp”的removeClass，以及一个名为“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/

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

1 个答案: