切换其中一个div时关闭其他打开的div

时间:2017-05-31 08:13:53

标签: javascript jquery

我有多个按钮.expandable-container-mobile类。

当我在按钮上切换时,它会展开。

目前当我打开另一个div时,之前打开的div不会关闭,但我试图关闭其他部分,下面是我的代码:

$( ".expandable-container-mobile").click(function() {
    $(this).children('.mobile-show-section').stop().slideToggle(700);
    $(this).not.('.mobile-show-section').stop().slideUp();
});

下面的html代码:php代码将生成行和按钮:

<div class="expandable-container-mobile">
                        <div class="expandable" id="<?php echo strtolower($actual_post_title); ?>-expandable">
                            <div class="activator">
                                <div class="section-title" id="<?php echo strtolower($actual_post_title); ?>"><?php echo $actual_post_title; ?></div>
                            </div>
                        </div>
                        <div class="mobile-show-section">
                            <?php                        
                                $args = array(
                                    'sort_order' => 'asc',
                                    'sort_column' => 'post_date',
                                    'child_of' => $id
                                ); 

                                $children = get_pages($args);

                                $children_ids = array();
                                if ( ! empty( $children ) )
                                    foreach ( $children as $post )
                                        $children_ids[] = $post->ID;

                                $arrlength = count($children_ids);

                                for($x = 0; $x < $arrlength; $x++) {
                                ?>
                                    <a href="<?php echo get_permalink($children_ids[$x]); ?>"><?php echo get_the_title($children_ids[$x]); ?> </a>
                                <?php                                              
                                }    
                            ?>
                        </div>
                    </div>

1 个答案:

答案 0 :(得分:1)

您的代码切换所有孩子,第二行将滑动.expandable-container-mobile不是.mobile-show-section

尝试类似:

var el = $(this).find('.mobile-show-section');//get the current element
el.stop().slideToggle(700);//toggle the current one 
$('.mobile-show-section').not(el).stop().slideUp();//hide the rest