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

Question

我有多个带有.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>

Answer 1

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

尝试类似：

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