Is it possible to make a menu with data-toggle='dropdown' not hide on click?

user_13531218 0
Viewed 515

I've got a drop-down menu that I've made with data-toggle='dropdown'. Now, everything is going accordingly in that the buttons close the menu on click except I want the gray button (as indicated below) to keep the menu displayed.

Code:

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

Is this possible with the method I'm using, or is there a better way to do so?

bootstrap-4 twitter-bootstrap html javascript
1 Answers

Rewrited your showBooks function in a jQuery way that Bootstrap 4 uses. And added there e.stopPropagation(); part, which is good tool to stop the Bootstrap dropdown from action.

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

user_31871270
Related