javascript - 如何使下拉菜单在单击其中的空白区域时不应该关闭，并且可点击的项目应该可以工作

Question

示例下拉菜单

假设如果我点击绿色它不应该关闭，如果我点击红色它应该关闭。

我的代码：

  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <div class="bg-success">
<div class="row">
   <div class="col-3 p-2">
      <button type="button" class="btn btn-danger">Clickable</button>
   </div>
   <div class="col-3 p-2">
      <button type="button" class="btn btn-danger">Clickable</button>
   </div>
   <div class="col-3 p-2">
      <button type="button" class="btn btn-danger">Clickable</button>
   </div>
    <div class="col-3 p-2">
      <button type="button" class="btn btn-danger">Clickable</button>
   </div>
    <div class="col-3 p-2">
      <button type="button" class="btn btn-danger">Clickable</button>
   </div>
    <div class="col-3 p-2">
      <button type="button" class="btn btn-danger">Clickable</button>
   </div>
</div> 
  </div>
  </ul>
</div> ```

标签： javascripthtmlcssdropdown