点击按钮隐藏菜单

Question

我有一个引导下拉。我想要实现的是一旦你点击按钮菜单出现，但当你再次点击按钮菜单不隐藏。我希望菜单在点击按钮时隐藏。我尝试的方法不起作用，我认为应该有一个更合适的方式来隐藏菜单点击按钮。我怎样才能做到这一点呢?提前谢谢。

$('.dropdown button').on('click', function() {
if ($(this).attr('class').split(" ").pop() == 'show') {
//not working menu is getting hidden before showen
$(this).parents('.dropdown').find('ul').hide()
}
});

.dropdown {
margin-left: 40%;
}
.dropdown-menu {
transform: translate(calc(-50% + 20px), 40px) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>

Answer 1

您是否愿意使用" toggle ";而不是?

$(function () {
$("button").click(function () {
$(".dropdown-menu").toggle();
});
});