admin管理员组

文章数量:1294698

I'm using Bootstrap 4, and my HTML structure is set up correctly. I've also added JavaScript to prevent the .show class from being removed, but it's not working as expected. I want the .show class to persist even after clicking anywhere on the screen. However, currently, whenever I click outside, the .show class is removed automatically. How can I prevent this behavior? i am talking about the dropdown legal-doc-dropdown show in this show class.

jQuery(document).ready(function() {
  // Open the first dropdown on page load
  jQuery(".legal-doc-dropdown:first .dropdown-menu").addClass("show");
  jQuery(".legal-doc-dropdown:first").addClass("show");

  // Click event for dropdowns
  jQuery(".dropdown-toggle").click(function(event) {
    event.stopPropagation(); // Prevent event bubbling

    var $thisDropdown = jQuery(this).next(".dropdown-menu");
    var $thisParent = jQuery(this).closest(".legal-doc-dropdown");

    // Check if the clicked dropdown is already open
    var isOpen = $thisParent.hasClass("show");

    // Close all dropdowns
    jQuery(".dropdown-menu").removeClass("show");
    jQuery(".legal-doc-dropdown").removeClass("show");

    // If it was not open, then open it
    if (!isOpen) {
      $thisDropdown.addClass("show");
      $thisParent.addClass("show");
    }
  });

  // Prevent dropdown from closing when clicking inside it
  jQuery(".dropdown-menu").click(function(event) {
    event.stopPropagation();
  });
});
<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="dropdown legal-doc-dropdown show">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
            Policy
        </button>
  <div class="dropdown-menu show">
    <a class="dropdown-item active" href="#">Privacy Policy</a>
    <a class="dropdown-item" href="#">Subscription Cancellation</a>
    <a class="dropdown-item" href="#">Cookies Policy</a>
    <a class="dropdown-item" href="#">Supported Currencies</a>
    <a class="dropdown-item" href="#">Acceptable Use Policy</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
            Connected Account Agreement
        </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
            Payments Company Terms
        </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

<script src=".7.1/jquery.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

I'm using Bootstrap 4, and my HTML structure is set up correctly. I've also added JavaScript to prevent the .show class from being removed, but it's not working as expected. I want the .show class to persist even after clicking anywhere on the screen. However, currently, whenever I click outside, the .show class is removed automatically. How can I prevent this behavior? i am talking about the dropdown legal-doc-dropdown show in this show class.

jQuery(document).ready(function() {
  // Open the first dropdown on page load
  jQuery(".legal-doc-dropdown:first .dropdown-menu").addClass("show");
  jQuery(".legal-doc-dropdown:first").addClass("show");

  // Click event for dropdowns
  jQuery(".dropdown-toggle").click(function(event) {
    event.stopPropagation(); // Prevent event bubbling

    var $thisDropdown = jQuery(this).next(".dropdown-menu");
    var $thisParent = jQuery(this).closest(".legal-doc-dropdown");

    // Check if the clicked dropdown is already open
    var isOpen = $thisParent.hasClass("show");

    // Close all dropdowns
    jQuery(".dropdown-menu").removeClass("show");
    jQuery(".legal-doc-dropdown").removeClass("show");

    // If it was not open, then open it
    if (!isOpen) {
      $thisDropdown.addClass("show");
      $thisParent.addClass("show");
    }
  });

  // Prevent dropdown from closing when clicking inside it
  jQuery(".dropdown-menu").click(function(event) {
    event.stopPropagation();
  });
});
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="dropdown legal-doc-dropdown show">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
            Policy
        </button>
  <div class="dropdown-menu show">
    <a class="dropdown-item active" href="#">Privacy Policy</a>
    <a class="dropdown-item" href="#">Subscription Cancellation</a>
    <a class="dropdown-item" href="#">Cookies Policy</a>
    <a class="dropdown-item" href="#">Supported Currencies</a>
    <a class="dropdown-item" href="#">Acceptable Use Policy</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
            Connected Account Agreement
        </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
            Payments Company Terms
        </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

  • javascript
  • html
  • jquery
  • css
  • bootstrap-4
Share Improve this question edited Feb 12 at 20:42 isherwood 61.1k16 gold badges120 silver badges169 bronze badges asked Feb 12 at 11:37 Samrat BarotSamrat Barot 112 bronze badges 4
  • 3 You should not try and make your own JS with the BS event handling like that in the first place, that is likely asking for trouble in one place or another, sooner or later. Try and see if you can handle this via the events provided, getbootstrap/docs/4.6/components/dropdowns/#events - check if hide.bs.dropdown allows you to prevent/cancel the default action of this event. – C3roe Commented Feb 12 at 11:59
  • If that doesn't work - then you will probably have to remove the attributes that make BS handle this automatically, from the HTML - and add the functionality yourself, by calling the necessary methods when required. getbootstrap/docs/4.6/components/dropdowns/#via-javascript – C3roe Commented Feb 12 at 11:59
  • TBH: If it's a "drop down" then the expected behaviour is that is auto-closes when you click elsewhere. Otherwise you want a "popup" which behaves differently. eg bootstrap 4 calls these popovers – fdomn-m Commented Feb 12 at 12:04
  • Here's some sample code that appears to do what you want using the hide.bs.dropdown event and returning false: stackoverflow/a/67066484/2181514 – fdomn-m Commented Feb 12 at 12:07
Add a comment  | 

1 Answer 1

Reset to default 1

This is non-standard behavior that requires custom code.

The simple solution is to check the clickEvent.target property provided by the hide.bs.dropdown event. If the target has class .dropdown-item then allow the dropdown to close normally. Otherwise prevent the default behavior.

Example

$(() => { // jQuery Ready

  $(".dropdown").on("hide.bs.dropdown", (e) => {
    if (!$(e.clickEvent?.target).hasClass('dropdown-item')) {
      e.preventDefault();
    }
  })

})
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<div class="dropdown legal-doc-dropdown m-1">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
        Policy
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Privacy Policy</a>
    <a class="dropdown-item" href="#">Subscription Cancellation</a>
    <a class="dropdown-item" href="#">Cookies Policy</a>
    <a class="dropdown-item" href="#">Supported Currencies</a>
    <a class="dropdown-item" href="#">Acceptable Use Policy</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown m-1">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
        Connected Account Agreement
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown m-1">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
        Payments Company Terms
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

本文标签： javascriptKeep the show class as it is when i click elsewhere on the screenStack Overflow

版权声明：本文标题：javascript - Keep the show class as it is when i click elsewhere on the screen - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741603547a2387841.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。