click to delete submenu dropdown

I need assistance with removing or hiding the dropdown submenu when clicking on the item. We are using bootstrap for CSS. Can someone please help me? Below is the code snippet:

<ul class="dropdown-menu" style="display: block; position: static;">
  <li class="dropdown-submenu active" id="xyz">
    <a href="#" id="family-1" class="family_type" style="display: block; color: rgb(73, 162, 20);">
      <label style="margin-right: 20px; width: 50px;"><img src="images/families/automotive_1.jpg"></label>Automotive
    </a>
    <ul class="dropdown-menu"> 
      <li class="family_id" id="1"><a style="cursor: pointer;" id="535" name="Fluid" class="masterTooltip">Fluid</a></li>
      <li class="family_id" id="1"><a style="cursor: pointer;" id="543" name="Power" class="masterTooltip">Power Fluid</a></li>                                                     
    </ul>
  </li>                            
  <li class="dropdown-submenu active" id="xyz">
    <a href="#" id="family-2" class="family_type">
      <label style="margin-right: 20px; width: 50px;"><img src="images/families/batteries.jpg"></label>Batteries
    </a>
    <ul class="dropdown-menu">
      <li class="family_id" id="2"><a style="cursor: pointer;" id="685" name="Batteries" class="masterTooltip">Batteries</a></li>
      <li class="family_id" id="2"><a style="cursor: pointer;" id="104" name="eries" class="masterTooltip">eries</a></li>   
    </ul>
  </li>
</ul>

Additionally, here is the corresponding CSS code:

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#3EA861;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#3EA861;}
.dropdown-submenu{float:none;}.dropdown-submenu>.dropdown-menu{margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

If anyone can assist me in resolving this issue, I would greatly appreciate it.

javascriptjqueryhtmlcss

Answer №1

TEST: http://jsfiddle.net/abcd1234/

$(document).ready(function(){
    $('.toolTip').on('mouseover', function(){
        var $ancestor = $(this).parent().parent().parent();
        //console.log($ancestor);
        $ancestor.hide();
    });
});

One thing to note about your code is that you are using the same id for multiple elements, which should be unique in 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

Inner div click events failing to trigger

When I move the .thumbnail divs outside of the #thumbhider and #thumbcontent divs, the click events function correctly. Currently, they are not working as expected. Website URL: I believe the issue may be related to the overflow:hidden property on the co ...

jqueryhtmlcss

Create a pop-up window within a single controller using Angular.js

I followed a tutorial to create this code. I am interested in learning how to utilize just one controller for generating the dialog box. Currently, I am using two controllers for this project. Any guidance or tips would be greatly appreciated. View my cod ...

javascriptjqueryangularjs

The problem of undefined icons in Material UI's Stepper StepLabel

Having some trouble incorporating a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I want to add an icon to each circle, similar to what is shown in this Material UI demo: https://i.sstatic.net/WLOcS.png However, ...

javascriptcssreactjsbootstrap-4material-ui

Instead of relying on traditional AJAX for receiving remote commands, consider using a new Image object in your code like this: `var

How efficient is the following method: var i = new Image(); i.src = 'http://secondary.domain.com/command.gif?command=somecmd&rand=' + ...epoch time....; ... utilizing mod_rewrite to redirect the above URL to a PHP script ... Is this an effe ...

javascriptajaximagenew-operator

Removing multiple tables simultaneously and encountering an error while utilizing ajax response text

I am facing a couple of challenges. First Issue: I encountered a problem while trying to delete groups from two tables in the database (gmembers and groups). My goal was to check if a user left a group, and if there are no remaining members in that g ...

javascriptphpmysqlajaxresponse

Generate a fresh array of elements and combine the objects that share the same value

Looking to create a new array of objects based on the original specs array of objects. I have searched for similar questions but nothing has solved my issue. const specs = [ { label: 'Brand', value: 'Nike' }, { label: 'Age ra ...

javascriptnode.jsarrays

Tips for displaying a multi-select dropdown in the Creative Tim Angular Material Pro filter panel

I am in need of assistance with modifying the standard Creative Tim Angular Pro Material template due to my limited CSS/SCSS skills. Could someone provide examples of the necessary changes, whether it involves altering the HTML or multiple CSS files withi ...

htmlangulartypescriptangular-material

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Discover distinct and recurring elements

Having two sets of JSON data: vm.userListData = [{ "listId": 1, "permission": "READ" }, { "listId": 2, "permission": "WRITE" }, { "listId": 2, "permission": "READ" }, { "listId": 3, ...

javascriptangularjsjsonfor-loopfilter

Discrepancy detected in AGM Map printout

When attempting to print my Angular AGM Map from Chrome, I noticed a large grey gap in the map. This gap is visible even when "background graphics" are turned off and it causes the map image below it to shift downwards. If you want to reproduce this issue ...

cssangulargoogle-maps-api-3printingangular-google-maps

Searching through various attributes of a single array using Jquery UI Autocomplete

Hey there! I'm currently working on implementing the jQuery UI autocomplete widget to search for matches from multiple attributes in my array, rather than just one as it typically does by default. I've been experimenting with their example code, ...

jqueryjquery-uijquery-ui-autocomplete

`CSS alignment issues`

Below is the HTML and CSS code that I am working with: .divOuter { width: 50%; margin: 0 auto; } .divInner1, .divInner2, .divInner3 { border: 1px solid; float: left; width: 150px; height: 150px; margin-left: 3px; margin-right: 3px; ...

htmlcss

When I switch to mobile view, my navigation menu vanishes

Currently in the process of creating a website using WordPress, specifically with a divi theme and utilizing a windows operating system. It seems that everything appears correctly on desktop, however when resizing the window or viewing the site on a mobile ...

htmlcsswordpressresponsivedivi-theme

Obtaining Browser Console Logs with Python Selenium - TCF API Integration

I am looking to extract Tracking Consent Strings (TC-strings) from websites that have implemented the Tracking Consent Framework for GDPR compliance. In the browser console, I can use the following code snippet: window.__tcfapi('ping', 2, functio ...

javascriptpythonseleniumasynchronous

Intersecting Hyperlink Elements Creating a Hover Effect

I've encountered a perplexing CSS display issue and I'm at a loss for alternative solutions besides simply widening the width of the parent div. Allow me to explain the layout: <div> <ul> <li> <a href="javascrip ...

css

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

What is the best way to transmit a JSON object rather than a JSON string to the browser using Rails?

Currently in my Rails code, I am using the following to send data to node.js: NodePush[].trigger('unit', 'join', {:id =>record.user_id, :name => record.user.name}, record.unit_id) The issue that I am encountering is that the con ...

jqueryruby-on-railsjson

Bringing in Bootstrap JavaScript library to a plain HTML project

Currently, I am utilizing Bootstrap version 5.2.3 and attempting to incorporate the JavaScript bundle. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Big project</title> <link rel ...

javascripttypescripttwitter-bootstrapbootstrap-modalbootstrap-5

Unusual problem detected with scrolling fixed div upwards

I have encountered a peculiar issue while attempting to fix a div containing other nested divs. My goal is to have the .menu div remain visible and fixed at the top of the page while scrolling, hiding the .slideshow_head div. However, despite fixing the . ...

javascriptcsshtml

Transforming data from PHP JSON format into HTML output

Struggling to convert JSON data into HTML format? Having trouble maintaining the correct order of child elements in your structure? Here's a solution: Take a look at this example JSON: { "tag": "html", "children": [ { "ta ...

phphtmljsondom