1

我有一个手风琴，当页面加载时，所有手风琴都折叠起来，当您单击其中一个时，它会展开。当前仅当您单击已折叠的链接时才会折叠。

如何更改下面的 jQuery，以便当您单击已经展开的手风琴时它会折叠？

我知道这个问题已经有一些变体，但我不能用我知道的小 Jquery 得到答案！

<script type="text/javascript">
jQuery(function($) {
$(document).ready(function(){   
    //Set default open/close settings
    $('.acc_container_products').hide(); //Hide/close all containers
    // $('.acc_trigger_products:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

    //On Click
    $('.acc_trigger_products').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger_products').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
    });
});
});
</script>

HTML：

                        <h2 class="acc_trigger_products"><a href="#">Technical specification</a></h2>
                    <div class="acc_container_products">
                        <div class="block_products">    
                            <div class="included-content">
                                <ul style="margin-top:0px!IMPORTANT;margin-bottom:0px!IMPORTANT;">
                                <?php while(the_repeater_field('technical_specification')): ?>
                                    <li>
                                        <?php echo the_sub_field('technical_specification'); ?>
                                        <?php if(get_sub_field('extra_information') != "") { ?>
                                            <img title="<?php echo the_sub_field('extra_information'); ?>" class="helpButton" src="<?php bloginfo('stylesheet_directory'); ?>/images/rogue-resolutions-help-button.png" height="20" width="20" />
                                        <?php } ?>
                                    </li>
                                <?php endwhile; ?>
                                </ul>
                            </div>
                        </div>      
                    </div>

CSS：

    h2.acc_trigger_products {
    color:black;
    font-family:Helvetica, Arial;
    font-size:14px;
    padding: 0;
    margin: 2px 0 0 0;
    background-image: url('images/rogue-resolutions-products-acc.png');
    background-repeat:no-repeat;
    height: 32px;
    line-height: 32px;
    width: 298px;
    font-weight: normal;
    float: left;
}
h2.acc_trigger_products a {
    color:black!IMPORTANT;
    font-family:Helvetica, Arial;
    font-size:14px;
    text-decoration: none;
    display: block;
    padding: 0 0 0 15px;
    font-weight:bolder; 
}
h2.acc_trigger_products a:hover {
    color:black!IMPORTANT;
    font-family:Helvetica, Arial;
    font-size:14px;
    font-weight:bolder;
}
h2.active {background-position: left bottom;}
.acc_container_products {
    margin: 0px; 
    padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 296px;
    clear: both;
    background-color: #ccc;
}
.block_products {
    padding:10px;
    width:276px;
    }

.acc_container_products p.title {
    margin:0px!IMPORTANT;
    }

.acc_container_products p {
    margin-top:0px!IMPORTANT;
    }
4

1 回答 1

2

假设整个 HTML 块重复，请使用以下脚本：

$(document).ready(function () {
    $('.acc_container_products').hide(); //hide all at start
    $('.acc_trigger_products').click(function(){
        $('.acc_trigger_products').removeClass('current');  //remove the 'current' class
        $(this).addClass('current'); //add 'current' class to clicked item
        $('.acc_trigger_products:not(.current)').removeClass('active').next().slideUp(); //slide up items which are not the 'current' one

        $(this).toggleClass('active').next().slideToggle(); //toggle class and visibility
    });
});​

见小提琴：http: //jsfiddle.net/PgkE2/4/

于 2012-10-30T14:46:31.093 回答