Issue with Bootstrap dropdown menu not closing correctly when clicked on mobile devices

On my Bootstrap website, I have a mobile menu that looks like this:

<a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true">
                        Rent Costumes
                      </a>

When a user clicks on it, the menu expands to show the items inside. Inspecting it reveals that a class 'show' is added, and clicking it again should remove the class and close the menu:

<a class="nav-link show" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true">
                        Rent Costumes
                      </a>

However, it is not closing. Can anyone provide guidance on how to make it close when clicked again? The live URL is: enter link description here

Thank you in advance

htmljquerycssbootstrap-4drop-down-menu

Answer №1

What version of Bootstrap are you using? In Bootstrap 5, we use data-bs-toggle, otherwise it's data-toggle. You can find more information at this link.

...

                    Rent Costumes
                  </a>

It seems like you're using Bootstrap 4. I hope this information helps. Visit https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp for more details.

Answer №2

In my quest for a different approach, I implemented JavaScript to detect even and odd clicks on a button and adjust the style of the submenu accordingly. Here's the code snippet:

function myFunction() {
  let even = 'block';
  let odd = 'none';
  let elements = document.getElementsByClassName("dropdown-menu")

  Array.prototype.forEach.call(elements, function(element) {
    element.style.display === even ? element.style.display = odd : element.style.display = even
  });
}
<a class="nav-link" href="#" id="shop_submenu" onclick="myFunction()" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="true">
                        Rent
                      </a>

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

Empty Data Returned After Sending AJAX Request

Currently, I am delving into the world of ajax in order to simplify my life going forward. I successfully managed to implement an example where a constant array was posted to my controller without any issues. However, when attempting to fetch data from an ...

c#jqueryajaxasp.net-mvc

Is there a way to adjust the font size in Javascript/Html without changing the color?

I have a code snippet that creates a button to increment a variable, and I want to change the font size of the displayed variable. This code is for a game akin to cookie clicker. <div class="game-object"> <script type="text/javascript>"; var c ...

javascripthtml

Stop users from skipping ahead in an HTML5 video

Struggling to stop a user from seeking on the video player. I've attempted to bind to the event, but it's not working as expected. Any suggestions on how to successfully prevent this action? @$('#video').bind("seeking", (e) =& ...

javascriptjqueryhtml5-video

Using navigator.app.backHistory to navigate back within the app

Currently working on Cordova for Android, incorporating jQuery and jQuery Mobile into my Example App. A slide menu is a key feature of the app, and I am using the "menubutton" event to toggle its visibility based on the global_isOpen variable: document.ad ...

jquerycordovaback-button

Once the AJAX callback is complete, the onblur event will revert back to the original field or the updated field

I am currently working with an AJAX callback: Here is the HTML snippet: <a onCLick="loadXMLDoc(id1,id2)">(Add)</a> This function triggers an AJAX method that replaces the "(Add)" text with a basic HTML input field. Subsequently, when there ...

javascripthtmlajaxcallback

Different from SimplyScroll but with added functionalities

Searching for a replacement for the now deprecated SimplyScroll with specific features. I am in need of a continuous, automatic carousel of boxes/images that halts when hovering over with the mouse (a feature SimplyScroll possesses), and allows movement ...

javascriptjqueryhtmlcarousel

Arranging list items on top of each other without using absolute positioning

Hey there! I am trying to figure out a way to stack list items containing images on top of each other, like a deck of cards, but without resorting to absolute positioning. I attempted to do it using absolute positioning, here's what I came up with: ...

htmlcssangularjs

The Ajax request is not being triggered when using a different form submit method

Being a tech enthusiast, I have developed a handy function: function blur_slide_visit_count(){ $.ajax({ type: 'POST', url: 'add_save_slide_visitor_count.php', async: false, data: { fillvalue: fieldAr ...

javascriptphpjqueryajax

Avoid duplicate submissions while still enforcing mandatory fields

Let's start with a basic form that only asks for an email address: <form action="NextPage.php" method="post"> <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email"> <button type="submit">Subm ...

javascripthtml

Tips for limiting the text in video player controls to fit within a specific container

I'm having an issue with my video player where the controls scale incorrectly when the window size changes. Does anyone know how to make the "time-total", "time-played" and "timeline" elements follow the boundaries of the "video-controls" div like the ...

jqueryresize

Using jQuery to show and hide elements on a webpage

One issue I'm facing is changing the content on a page depending on the clicked link. The problem arises when the displayed content for one link persists even after clicking another link, despite setting it to not display when another link is clicked. ...

javascriptjqueryhtmlcss

What could be the reason for the modal-side modal-top-right class not functioning properly in Bootstrap modals

Here is the code snippet: <div class="modal fade right" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog modal-side modal-bottom-right"> <div class="modal-content"&g ...

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-modal

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not

I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...

javascriptcssreactjsreact-typescript

jQuery droppable: Encounter of an unexpected TypeError: undefined lacks the characteristics of a function

I'm trying to implement drag and drop functionality on my website. However, I am encountering an error message in the console that says: Uncaught TypeError: undefined is not a function ... presentation-categories.js?version=1:23. The error occurs at ...

javascriptjquery

Using session variables in HTML allows developers to store and retrieve

My index.html file includes a login form that submits to login.php. Once the user is verified, they are redirected back to index.html and the verified username is stored in a session variable called username. I am looking for a way to display this username ...

phpjqueryhtmlajaxsession-variables

Tips for connecting an event to an object for resizing and clicking

I have been working with jQuery version 1.4.1 and attempting to assign resize and click events in this manner, but it does not seem to be functioning as expected. var $elements = []; $elements.window = $(window); $elements.window.bind('resize', ...

jqueryattachevent

Exploring shader file content within three.js with the help of jQuery

I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...

javascriptjqueryhtmlthree.jsshader

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid

Using jQuery to set menu active states for a sprite-based navigation with distinct class names

I'm curious about how to accomplish this using JQuery. I have a menu where each item must have a unique class name in order for the CSS to properly display a sprite background position shared by all items. When an item is clicked, I also need to activ ...

jquerycss

Enhance the worth of text box

Is there a way to adjust the value of a textbox by one on keyup, keydown, or tap events? Check out this example. Here is the HTML structure: <div class="right-content" id="rc-0" style="height: 250px;"> <div class="right-cont-main" id="rcm-0" s ...

javascriptjqueryhtmlcss