Question

任何人都可以一次添加打开多个手风琴的功能，或者通过点击关闭。和开放和关闭的图标，如+＆amp; - 签？

这里的HTML

<div id="wrapper">
    <div class="accordionButton">Button 1 Content</div>
    <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
    <div class="accordionButton">Button 2 Content</div>
    <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
    <div class="accordionButton">Button 3 Content</div>
    <div class="accordionContent">Content 1<br />Short Example</div>
    <div class="accordionButton">Button 4 Content</div>
    <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
</div>

jQuery：

jQuery(function() {

//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('normal');
    $(this).next().slideDown('normal');
});

//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();

});

并摆弄http://jsfiddle.net/Fdps3/

Answer 1

这会让你朝着正确的方向前进：

<div class="wrapper">
    <div id="accordion1" class="accordion-item">
        <div class="accordion-item-header">
            <a data-accordion="" href="#accordion1">Button 1</a>
        </div>
        <div class="accordion-item-body">
            content...
        </div>
    </div>
</div>

使用Javascript：

jQuery(function() {

    $("[data-accordion]").on("click.accordion", function(e, suppress) {
        e.preventDefault();
        var $this = $(this);
        var accordionElement = $this.attr("href");
        var $accordionElement = $( accordionElement );

        if ( !$accordionElement.hasClass("active") ) {
            if ( suppress == undefined ) {
                $(".accordion-item.active .accordion-item-body").slideUp();
            }
            $accordionElement.addClass("active").find(".accordion-item-body").slideDown();
        } else {
            $accordionElement.removeClass("active").find(".accordion-item-body").slideUp();
        }

    });

    $("[data-accordion-control]").on("click", function(e) {
        e.preventDefault();
        var $this = $(this);
        var accordionElements = $this.attr("data-accordion-control");

        $(".accordion-item").removeClass("active");

        if ( accordionElements != "" ) {
            $(accordionElements).each(function() {
                $(this).find("[data-accordion]").trigger("click.accordion", "suppressSlideUp");
            });
        } else {
            $("[data-accordion]").trigger("click.accordion", "suppressSlideUp")
        }
    });    

});

小提琴：http://jsfiddle.net/Varinder/XwG3F/6/

更新小提琴：http://jsfiddle.net/Varinder/XwG3F/8/

多功能开放式手风琴，并且开放式关闭手风琴的动画图标

1 个答案: