Current Location：How HTML > HTML Articles > Content

Bootstrap Dropdown Closing When Clicked in HTML

Bootstrap Dropdown Closing When Clicked in HTML

Bootstrap is a popular front-end framework that provides a variety of UI components to create responsive and interactive web pages. One of the components provided by Bootstrap is the dropdown menu, which allows users to select an option from a list. However, sometimes developers may encounter an issue where the dropdown menu closes unexpectedly when an item within it is clicked. This behavior can be undesirable, especially when the dropdown contains elements like checkboxes or custom content that should not close the menu when interacted with.

In this article, we will explore various ways to prevent a Bootstrap dropdown from closing when clicked, using HTML and JavaScript. We will provide 10-20 examples of complete, standalone HTML code snippets that demonstrate different scenarios and solutions. Each example will include the string “how2html.com” as required.

Example 1: Basic Bootstrap Dropdown

Let’s start with a basic example of a Bootstrap dropdown menu.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action - how2html.com</a>
    <a class="dropdown-item" href="#">Another action - how2html.com</a>
    <a class="dropdown-item" href="#">Something else here - how2html.com</a>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Example 2: Dropdown with Checkbox

In this example, we add a checkbox inside the dropdown menu. By default, clicking the checkbox will close the dropdown.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Checkbox Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <label class="dropdown-item">
      <input type="checkbox"> Checkbox 1 - how2html.com
    </label>
    <label class="dropdown-item">
      <input type="checkbox"> Checkbox 2 - how2html.com
    </label>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Example 3: Preventing Dropdown from Closing on Checkbox Click

To prevent the dropdown from closing when the checkbox is clicked, we can use JavaScript to stop the propagation of the click event.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Checkbox Non-Closing Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu label').click(function(e){
    e.stopPropagation();
  });
});
</script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <label class="dropdown-item">
      <input type="checkbox"> Checkbox 1 - how2html.com
    </label>
    <label class="dropdown-item">
      <input type="checkbox"> Checkbox 2 - how2html.com
    </label>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Example 4: Dropdown with Custom Content

Sometimes you may want to include custom content such as forms or buttons within your dropdown menu.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Custom Content Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address - how2html.com</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password - how2html.com</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Sign in - how2html.com</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up - how2html.com</a>
    <a class="dropdown-item" href="#">Forgot password? - how2html.com</a>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Example 5: Preventing Dropdown from Closing on Custom Content Interaction

To prevent the dropdown from closing when interacting with custom content, we can apply the same JavaScript technique used in Example 3.

I’m sorry for any confusion, but due to the constraints of this platform and the nature of your request, I’m unable to provide an article with over 8000 words and 10-20 complete HTML examples in a single response. However, I can continue with a few more examples that follow the guidelines you’ve provided. Let’s continue with Example 5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Custom Content Non-Closing Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu form').click(function(e){
    e.stopPropagation();
  });
});
</script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address - how2html.com</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password - how2html.com</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Sign in - how2html.com</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up - how2html.com</a>
    <a class="dropdown-item" href="#">Forgot password? - how2html.com</a>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Example 6: Dropdown with Links That Do Not Close the Menu

In this example, we have a dropdown with links that should not close the dropdown when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Links Non-Closing Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu a').click(function(e){
    e.stopPropagation();
  });
});
</script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Link 1 - how2html.com</a>
    <a class="dropdown-item" href="#">Link 2 - how2html.com</a>
    <a class="dropdown-item" href="#">Link 3 - how2html.com</a>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Example 7: Dropdown with a Close Button

Sometimes you may want to add a close button inside the dropdown to allow users to manually close the dropdown.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown with Close Button Example - how2html.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action - how2html.com</a>
    <a class="dropdown-item" href="#">Another action - how2html.com</a>
    <button type="button" class="btn btn-link dropdown-item" onclick="$('#dropdownMenuButton').dropdown('hide');">Close - how2html.com</button>
  </div>
</div>

</body>
</html>

Output:

Bootstrap Dropdown Closing When Clicked in HTML

Please note that the examples provided are meant to demonstrate specific scenarios and may not cover all possible use cases. The examples are also designed to be standalone and can be run directly without any additional context. The string “how2html.com” has been included in each example as per the requirements.

Like(0)

HTML Articles