是否可以使用 data-toggle='dropdown' 在点击时不隐藏菜单？答案

【问题标题】：Is it possible to make a menu with data-toggle='dropdown' not hide on click?是否可以使用 data-toggle='dropdown' 在点击时不隐藏菜单？
【发布时间】：2020-08-12 06:20:45
【问题描述】：

我有一个使用data-toggle='dropdown' 制作的下拉菜单。现在，除了我希望灰色按钮 （如下所示） 来保持菜单显示之外，所有按钮都会在单击时关闭菜单。

代码：

<div class='dropdown'>
  <a class='post_options dropdown-toggle' data-toggle='dropdown' style='float:".lang('post_options').";' href='#'><span>&bull;&bull;&bull;</span></a>
  <ul class='dropdown-menu ".lang('postDropdown')."' style='top:10px;color:#999;text-align: left;'>
    <li><a href='javascript:void(0)' onclick=\"editPost('$get_post_id')\"><span class='fa fa-pencil'></span> ".lang('EditPost_DDM')."</a></li>
    <li><a href='javascript:void(0)' onclick=\"deletePost('$get_post_id')\"><span class='fa fa-trash-o'></span> ".lang('DeletePost_DDM')."</a></li>
    <li><a href='javascript:void(0)' onclick='showBooks()'><span class='fa fa-book'></span> Add to book</a></li>
    <div id='book-dropdown' style='display:none'>
      <script>
        function showBooks() {
          var x = document.getElementById('book-dropdown');
          if (x.style.display === 'none') {
            x.style.display = 'block';
          } else {
            x.style.display = 'none';
          }
        }
      </script>
      <a class='book-title-dropdown'>".$row['book_name']."</a><br>";
    </div>
    <li class='divider'></li>
    <li><a href='javascript:void(0)' onclick=\"savePost('$get_post_id','$check_path')\"><span class='fa fa-bookmark'></span> ".lang('savePost_DDM')."</a></li>
    <li><a href='javascript:void(0)' onclick=\"reportpost('post','$get_post_id')\"><span class='fa fa-bug'></span> ".lang('reportPost_DDM')."</a></li>
  </ul>
</div>

我使用的方法可以做到这一点，还是有更好的方法？

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

以 Bootstrap 4 使用的 jQuery 方式重写了您的 showBooks 函数。并在此处添加了e.stopPropagation(); 部分，这是阻止 Bootstrap 下拉菜单执行操作的好工具。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class='dropdown'>
  <a class='post_options dropdown-toggle' data-toggle='dropdown' href='#'><span>&bull;&bull;&bull;</span></a>
  <ul class='dropdown-menu' style='top:10px;color:#999;text-align: left;'>
    <li><a href='javascript:void(0)'><span class='fa fa-pencil'></span> ".lang('EditPost_DDM')."</a></li>
    <li><a href='javascript:void(0)'><span class='fa fa-trash-o'></span> ".lang('DeletePost_DDM')."</a></li>
    <li><a href='javascript:void(0)' class="show-books"><span class='fa fa-book'></span> Add to book</a></li>  
    <div id='book-dropdown' style='display:none'>
      <script>
      $(".dropdown-menu a.show-books").click((e) => {
         e.stopPropagation();

         var x = document.getElementById('book-dropdown');
          if (x.style.display === 'none') {
            x.style.display = 'block';
          } else {
            x.style.display = 'none';
          }
      })
      </script>
      <a class='book-title-dropdown'>".$row['book_name']."</a><br>";
    </div>
    <li class='divider'></li>
    <li><a href='javascript:void(0)'><span class='fa fa-bookmark'></span> ".lang('savePost_DDM')."</a></li>
    <li><a href='javascript:void(0)'><span class='fa fa-bug'></span> ".lang('reportPost_DDM')."</a></li>
  </ul>
</div>

【讨论】：