Rotate Chevron icon downwards on mobile devices in a Multilevel Dropdown Bootstrap 4

Bootstrap 4 is being utilized for my current project,

I am looking to modify the rotation of the chevron icon in a multi-level dropdown menu specifically on mobile devices when the parent link is tapped,

Here is the code snippet for the multi-level dropdown menu,

Thank you

$(function() {
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    //method 2: remove show from all siblings of all your parents
    $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");
    $(this).siblings().toggleClass("show");
    //collapse all after nav is closed
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });
  });
});
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
}

.dropdown-submenu>a:after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  content: "\f054" !important;
  border: none;
  position: absolute;
  right: 10px;
  top: 5px;
}
...
</script>

For my project, I have implemented Bootstrap 4,

The default behavior of the dropdown menu does not include rotating the chevron icon,

I simply need to adjust the chevron icon rotation on mobile devices when the link is clicked.

Appreciate it!

javascripthtmljquerycssbootstrap-4

Answer №1

Below are the necessary CSS and JS code snippets that can be added to achieve your desired outcome:

CSS

.dropdown-rotate::after {
    transform: rotate(90deg);
}

JS

$('.dropdown-toggle').on('click', function (e) {
    e.target.classList.toggle('dropdown-rotate');
});

The following is the detailed code snippet that includes both CSS and JavaScript for achieving a dropdown functionality in your webpage:

$(function() {
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");
    $(this).siblings().toggleClass("show");
  
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });
  });

  $('.dropdown-toggle').on('click', function (e) {
    e.target.classList.toggle('dropdown-rotate');
  });
});
.dropdown-submenu {
  position: relative;
}

/* Additional CSS Styles */


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

/* Example Nav Structure */

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

"Simply tap on an element that has been dynamically inserted into the

Many individuals are familiar with how to attach a "click" event to an element that is dynamically added using the following syntax: $('#main').on('click','.link',function(){ //some code here }); In this example, .link repr ...

javascriptjquery

The installed NPM package does not contain the necessary TypeScript compiled JS files and declaration files

I have recently released a TypeScript library on NPM. The GitHub repository's dist (Link to Repository Folder) directory includes all compiled JavaScript and d.ts files. However, after running npm i <my_package>, the resulting module contains on ...

javascriptnode.jstypescriptnpmnpm-install

Trouble with Displaying Angular Template using ng-hide

I am encountering an issue with my angular directive that is used to display a button form. The template remains hidden until it needs to be displayed for the user. Although the template works fine on its own, it does not appear when integrated into the la ...

javascriptangularjstemplates

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

What sets apart a string constant from a string enclosed in quotation marks? And what techniques exist to transform one into the other?

Calling an asynchronous function: const variable = 'something' await MyAsyncFunction.execute(variable) No output is displayed. But if I change it to: await MyAsyncFunction.execute('something') It works!! Can someone please explain h ...

javascriptnode.jsstring

Setting the default value in a Select tag using React

Within this particular Select tag, the goal is to establish an initial value and assign that value to a variable named name. The Select tag itself includes the following: <Field name="data.account" render={({ field: { name, ...restFieldProps } }) = ...

javascripthtmlreactjsdrop-down-menu

javascript dynamic content remains unaffected by ajax call

I'm a beginner with javascript and I am using a PHP variable to create links dynamically. Here is an example of how the variable is set: $addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'" onClick=addcart(' ...

javascriptphpajax

The findByIdAndUpdate() function lacks the ability to modify the collection

I'm encountering an issue when trying to update a product using mongodb and redux. It seems that the database is not reflecting the changes after I attempt to update the product. Can someone please assist me with this problem? Here is my product.js f ...

javascriptnode.jsreactjsexpressmongoose

Utilizing RxJS finalize in Angular to control the frequency of user clicks

Can someone provide guidance on using rxjs finalized in angular to prevent users from clicking the save button multiple times and sending multiple requests? When a button click triggers a call in our form, some users still tend to double-click, leading to ...

javascriptangulartypescriptrxjs

managing the HTML class names and IDs for various functions such as styling, jQuery interactions, and Selenium automation

While there is an abundance of articles on writing clean HTML/CSS, one aspect that seems to be lacking advice is how to organize class names and IDs for different purposes such as design, jQuery, and Selenium testing. The challenge lies in deciphering the ...

javascriptjqueryhtmlcssselenium

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

javascriptangularjscss

Dealing with asynchronous calls in useEffect.Here are some tips for managing

When invoking a function from within a useEffect, which is located in a different class, there seems to be an issue with receiving the expected data back. The function call triggers another async function that makes an API call and performs operations on t ...

javascriptreactjsaxios

Is there a more efficient method to halt a jQuery animation plugin? Surely, there must be a more effective solution

After feeling under the weather for the past week and feeling incredibly bored, I decided to delve into the world of creating jQuery plugins. In just half an hour, I managed to put together a plugin that mimics the "wiggle" effect when pressing and holding ...

jqueryjquery-pluginscss

Troubleshooting: React is not defined in Rollup + React 17 with updated JSX Transform

I'm currently working on prototyping a microfrontend architecture using Rollup and multiple create-react-app applications. However, when I try to locally yarn link my external app with the container app, I am encountering the following error: The err ...

javascriptreactjsreact-routerrollupjs

One issue with my Quiz app is that sometimes the correct and incorrect answer methods run concurrently, leading to occasional occurrences of this problem

One issue I encountered while developing a Quiz app is that sometimes the methods for correct and incorrect answers run simultaneously. This problem occurs sporadically. I want to highlight that my code is functioning correctly. The only challenge I face ...

javascript

The jQuery append function does not incorporate CSS styling

I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...

jquerycss

Tips for utilizing New FormData() to convert Array data from an Object for executing the POST request with Axios in ReactJs

When working on the backend, I utilize multer to handle multiple file/image uploads successfully with Postman. However, when trying to implement this in ReactJS on the frontend, I find myself puzzled. Here's a sample case: state = { name: 'pro ...

javascriptreactjsexpressaxiosmulter

Express Session doesn't remove the variable assigned

While developing a web application using Node Express, I encountered a simple issue in my new project. Despite setting a session variable to null, the old session data is still being called. Seeking assistance to resolve this issue. I utilized express-ses ...

javascriptnode.jsexpress

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

htmlcss

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss