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

Hide Displayed Class and Show the Clicked One in jQuery

本文关键字：显示 单击 jQuery 隐藏      更新时间：2023-09-26

我有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);
});

提前谢谢。

因为您的子菜单位于.mainMenudiv中。将$(document)替换为$('.mainMenu')。因为您正在将事件委派给文档对象的子对象，所以事件会冒泡到文档级别。选择最近的父级$('.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

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