javascript - 在 jQuery 中隐藏显示的类并显示单击的类

Question

我有 3 个菜单按钮，每个按钮都有子菜单。默认隐藏子菜单。单击任何菜单时，将显示其下的子菜单。这是可行的，但如果我单击第二个或第三个按钮，它会显示其子菜单，而第一个按钮的子菜单仍将显示。我希望任何显示的按钮在单击任何其他按钮时隐藏。

HTML 代码:

<div class='mainMenu'>
<button class='menus'> aTone </button>
    <div class='sub'>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button class='menus'> A1 </button>
                    <button class='menus'> B2 </button>
                    <button class='menus'> B3 </button>
                </div>
            </div>
        </div>
    </div>
<button class='menus'> bTone </button>
    <div class='sub'>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button class='menus'> B1 </button>
                    <button class='menus'> B2 </button>
                    <button class='menus'> B3 </button>
                </div>
            </div>
        </div>
    </div>
<button class='menus'> ATone </button>
    <div class='sub'>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button class='menus'> C1 </button>
                    <button class='menus'> C2 </button>
                    <button class='menus'> C3 </button>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery 代码:

$('.sub').hide();
$(document).on('click', '.menus', function(){
    var $this = $(this);
    $this.next('.sub').slideToggle(400);
}); 

提前谢谢你。

Answer 1

因为您在 .mainMenu div 中有子菜单。将 $(document) 替换为 $('.mainMenu')。因为您在文档对象的子对象上委托(delegate)事件，所以事件会向上冒泡到文档级别。选择您拥有的最近的父级 $('.mainMenu') 会更方便(并且父级必须在加载时存在于页面上)。试试这个:

$('.sub').hide();
$('.mainMenu').on('click', '.menus', function(){
    $('.sub').hide(); // this will hide all submenu's
    var $this = $(this);
    $this.next('.sub').slideToggle(400); // this will show submenu next to clicked button
});

DEMO