The Bootstrap 4 dropdown seems to have a one-time use limit

I'm currently working on a dropdown menu using Bootstrap 4. The dropdown menu is functional, but I'm facing an issue where it only toggles once. I have tried various solutions recommended on different websites, but none of them seem to work. Below is the code I am using:

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
htmljquerycssbootstrap-4responsive-design

Answer №1

It seems like your code is working fine, but you may be missing some Bootstrap .js or .css files. Make sure to include them in your project.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5f455e4558">[email protected]</a>/dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
</head>

<body>
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424504a514a57">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Jquery changePage function seems to keep caching requests endlessly

Alright, let me try to explain how this is supposed to function. I am working on a mobile project and using JQuery mobile for it. 1) The user selects an item from a list, which takes them to an external page not yet loaded in the DOM. 2) The user then su ...

jqueryjquery-mobile

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

javascripthtmlnode.js

Displaying a Bootstrap loading spinner on the right side of a list item

I want to position a Bootstrap loading spinner on the right side of a ui li, with the text "Keywords" on the left side of the ui li. My current HTML code is as follows: <ul class="list-group" id="my-list"> <li class="l ...

htmltwitter-bootstrapbootstrap-5

What is the best method to make an email address distinct?

<body> <p>Please input your email address:</p> <input id="email" style="margin-bottom: 20px; margin-top: 2px;" type="email" placeholder="Email Address"> <input onclick= "validateEmail(email)" type="su ...

javascripthtmlfunctionhtml-emailindexof

Omitting a portion of the key in JSON request with jQuery

Currently, I am populating some elements using JSON data. However, when a new JSON is loaded, the structure of the JSON appears slightly different. How can I ignore the initial part of the key to make it work? I thought about using an asterisk but that res ...

jqueryjson

Merge two separate Vue applications into one cohesive application

I have developed two separate Vue apps independently from each other. User Interface Admin Interface Each app has its own routes, store, configs, etc. I came across this helpful comment here which discusses treating each app as a component within a mai ...

javascripthtmlvue.jssingle-page-application

Tips for using the Enter key to shift focus to the next input field

I am trying to move to the next input field when I hit the enter key. I found a solution in another question here, but the code provided doesn't work for me because my input fields are inside a table. Here is my HTML code: <form action="#"> < ...

javascriptjquery

What is the best method to retrieve checked checkbox values and the selected dropdown value using AngularJS?

My code is set up to capture checked checkbox values and selected dropdown value when the submit button is pressed. It successfully retrieves the checked checkbox values, but I'm having trouble getting the selected offer from the dropdown. For example ...

javascriptjqueryangularjs

Navigating Angular with relative paths: A guide to locating resources

Here is the structure of my app: index.html main.ts app |--main.component.html |--main.component.ts |--app.module.ts |--note.png ... etc I am trying to include the note.png file in main.component.html which is located in the same folder. I have att ...

javascripthtmlangular

Tips on increasing the button size automatically as the elements inside the button grow in size

I have a button with an image and text inside, styled using CSS properties to achieve a specific look. However, I encountered an issue where the text overflows outside of the button when it's too long. I want to find a way to wrap the text inside the ...

htmlcss

Guide on stacking two divs on each other in response to a decrease in screen width

In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width. The goal is to have the second div stack below the first on ...

htmlcssflexbox

"Revolutionizing the way we navigate: Angular's innovative

Presently, my focus is on incorporating route transitions into my project. I've employed a component that appears on click and triggers the corresponding service function: routeTransition(destination) { if (this.router.url !== destination) { t ...

htmlcssangulartypescriptangular-animations

What is the best way to add a multiselect option in Django to display detailed information for each selected item

Experience the Description Image I am looking to develop a mini demonstration similar to the image provided. When I click on an item in the left column to select a country, I want the right column to dynamically display all the cities of the chosen countr ...

javascriptjquerypythondjango

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Transforming an HTML5 game into a native mobile application

I'm currently working on creating a HTML5 game. While I find HTML5 to be the most user-friendly programming language, I am facing an issue. I want my game to run as a native application on desktops (Windows, Mac, and Linux) rather than in a web browse ...

javascripthtmlnative

Adding a MySQL-PHP combination programmatically

Currently, I am working on a custom HTML page that sends data to PHP variables which are then utilized to generate customized SQL queries. function load_table($db, $old_table, $startRow, $nameColumn, $ipColumn, $addressColumn, $cityColumn, $stateColumn, $ ...

phpmysqlhtmlsql

Ways to eliminate the leading bullet point from an unordered list

I am currently working on creating a gallery of images using php and css. The images are placed in an unordered list as shown below: <ul style="list-style-type:none;"> <? while($data=mysql_fetch_row($result)) { $pic=$data[2]; if ($pic) { $ ...

phphtmlcss

How to seamlessly upload audio files on Laravel using Ajax with Jquery without needing to refresh the page

While trying to upload an audio file using ajax, I encountered an issue. <form enctype="multipart/form-data" id="voiceformpost" method="POST"> @csrf <input name="file" type="file" accept="audio/*" capture="microphone" id="recorder"> < ...

jqueryajaxlaravel

Saving solely the content of an HTML list element in a JavaScript array, excluding the image source

One issue I am facing is with an unordered list in HTML which contains items like <ul id="sortable"> <li class="ui-state-default"><img src="images/john.jpg">John</li> <li class="ui-state-default"><img src="images/lisa.jpg ...

javascriptjqueryhtmlarraystext

Basic jQuery fetch request

Having some trouble implementing an onclick button to send a get request to a php file. The jQuery is loading correctly, so that's not the issue. Check out the code below: The function that needs to be called <script type='text/javascript&a ...

phpjqueryget