是否可以使带有data-toggle ='dropdown'的菜单在单击时不隐藏？

问题描述

我有一个用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>

使用的方法有可能吗？或者有更好的方法吗？

解决方法

以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>