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

我有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>

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

---

提前谢谢。

因为您的子菜单位于

.main menu

div中。将

$（文档）

替换为

$（'.main menu'）

。因为您要在文档对象的子对象上委派事件，所以事件会上升到文档级别。选择最近的父级

$（'.main menu'）

更方便（加载时父级必须存在于页面上）。试试这个：

$('.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
});

---

在询问之前，实际上已经试过了。这是有效的，但这是最好的方法吗？@Yax：是的。正如我所说的，如果你有家长必须在页面上加载。这是最好的方法。

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