Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/

The jQuery section below is causing some trouble:

$(document).ready(function(e) {

        $(".sub-handle").click(function() {
           if(!$(this).hasClass('showing-sub')){ 
            $(this).find(".submenu").addClass('showing-sub');
            $(this).addClass("sidebarElementDivOnClick");
            $(this).find("a").addClass("outerMenuItem");
          }
          else{ 
              $(this).find(".submenu").removeClass("showing-sub");
         }
      });

      $(".innerMenuItem").click(function(){
       $(this).toggleClass("innerMenuItemOnClick");
      });
    }); 

I'm having difficulty removing a class with this code. It might be a small issue as I am new to jquery. Any assistance and explanation would be highly appreciated. Thank you!

Answer №1

You were looking at the wrong element to find the class. I made sure to include the necessary code to remove the classes when the menu is closed.

$(".sub-link").click(function() {
    if(!$('.submenu').hasClass('showing-sub')){ //class is not present, so add it and display dropdowns with specific backgrounds
        $(".sub-handle").find(".submenu").addClass('showing-sub');
        $(".sub-handle").addClass("sidebarElementDivOnClick");
        $(".sub-handle").find("a").addClass("outerMenuItem");
    } else { //if class exists, it means it was clicked again
        $(".sub-handle").find(".submenu").removeClass("showing-sub");
        $(".sub-handle").removeClass("sidebarElementDivOnClick");
        $(".sub-handle").find("a").removeClass("outerMenuItem");
    }
});

I have made modifications to your code, accessible here.

Answer №2

There is an incorrect condition in your jQuery code:

The correct conditions should be:

if(!$(this).find(".submenu").hasClass('showing-sub')){

OR

if(!$(this).hasClass('sidebarElementDivOnClick')){

Here are the examples to check: Example 1 and Example 2

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

Discover the seamless integration of using Angular UI select2 with Angular 1.2.5 for a smooth user

I am attempting to make this jsfiddle compatible with angular 1.2.5 instead of just 1.0.5. http://jsfiddle.net/hWXBv/25/ <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> The goal is to create a Gmail-lik ...

What is the proper way to provide an ajax response in order to fill up this jQuery variable?

My objective is to make the jQuery script below work with AJAX. Currently, it successfully populates my search box (<input type="text" id="search-names">) when I manually define UserArray: $(function() { var UserArray = [ {"label" ...

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

What is causing these divs to shift apart instead of staying next to each other when the browser window is resized?

I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfi ...

Converting a JavaScript variable into a jQuery object

Is there a way to transform this JavaScript variable and make it into a jQuery object as $(myFragment) alter the id attribute from "fragment" to "fragment1"? myFragment = "\ <div id='fragment'>\ <input type='hidde ...

The jQuery calls fail to execute in the update panel

My update panel is set to refresh every 1 minute. Within the panel, there are two input fields. When I click on each one, a datepicker function is triggered. Here are the scripts included for the datepicker: <link rel="stylesheet" href="http://code.jq ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

The functionality of the CSS transform property seems to be malfunctioning

My HTML and CSS code displays texts in two blocks within a dl element. I attempted to change the ▶ symbol to a different shape using the css transform scale property. However, some browsers only show the triangle in the first column. Why is this happenin ...

Locating specific text within an <li> element using the provided value

So, I have this set of words: <li>name</li> <li>myname</li> <li>yourname</li> Then there's also an input box input type="text" value="name" id="the_value" with the value "name", along with a submit button identif ...

Transforming the inputted URL into a clickable hyperlink

I have a text input field where any text entered is displayed below using angular.js. However, I am trying to convert any http URL entered into a clickable link. I found reference to the solution on this Stack Overflow page. Despite successfully converting ...

Activate the element only when all input fields are completed. This function can be used repeatedly

I am working on developing a versatile function that will iterate through all input fields. If any of these fields are empty, I want to trigger the toggling of a class name (disabled) on another element (such as an anchor or button). Currently, the functi ...

Is it possible to restrict the application of jquery .css() to a particular media query only?

Whenever a user's browser width is below 1160px, a media query is set up to hide my website's right sidebar. They can bring it back by clicking on an arrow icon, causing it to overlap the content with absolute positioning. To achieve this functi ...

The jquery code is not compatible with IE7, but it works perfectly with IE8, IE9, and Firefox

My code is running smoothly in ie8 with this line: $('#div_light tbody tr td').find('a:link').css('color', '#636466'); However, I'm facing issues in getting it to work on ie7. Can anyone help me understand why ...

Is it possible to scale images dynamically using CSS without losing their proper proportions?

http://jsfiddle.net/CJzCA/ Is there a way to resize images using CSS in the above jsfiddle? The keyboard images are currently too big compared to the text, and I usually solve this issue by using Photoshop. It would be more convenient if we could resize t ...

html form shifting positions based on screen resolution

I have been experimenting with a login screen design for my website recently. I created a form with a fixed position, but as the screen resolution changes, not only does the form's position shift, but also the image moves, causing an unwanted interse ...

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...

Unveiling Elements as You Scroll Within a Specified Area

I have implemented a jQuery and CSS code to reveal my contact form as I scroll down the page. However, I am facing an issue with setting a specific range for displaying the element while scrolling. Currently, I have only managed to handle the scrolling dow ...

Tips for resizing images to fit different screen sizes on your website

I have a website with an image that is currently responsive thanks to bootstrap. The width adjusts properly on different devices, but I want the image to crop to the left and right when it's enlarged in this specific case. I've tried various tec ...

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

Ensure that the submit button triggers the display of results with each click

My project involves two navigation bars, each with its own table displayed upon page load. Additionally, there is a search bar used to display search results in another table. The issue I'm encountering is that when I click the submit button once, th ...