Expanding list selection with jQuery_hover effect

I have devised the following code.

HTML

<ul class="treatment-menu">
    <li>Menu always visible</li>
       <ul class="nav-child">
          <li>Hidden sub menu</li>
       </ul>
</ul>

Hover function

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').show();
    },
    function () {
        $(this).find('.nav-child').hide();
});

FIDDLE http://jsfiddle.net/HBMfB/3/

However, I am facing difficulties in displaying the .navchild when hovering over .treatment-menu li.

Any suggestions?

Appreciate your help.

javascriptjqueryhtmlcss

Answer №1

To achieve this, simply utilize CSS

Check out this example on jsFiddle

.nav-child {
    display:none;
}
.treatment-menu:hover .nav-child {
    display:block;
}

For those using jQuery, consider using .toggle() as an alternative to writing show() and hide()

Here is another demo on jsFiddle

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').toggle();
    });

Alternatively, you can use .slideToggle() for a sliding effect.

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').slideToggle();
    });

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

Verify / Decline SweetAlert will be confirmed in both instances

When you click on "Confirm" or "Cancel", they both trigger the function "isConfirm". Interestingly, the "Cancel" button does not close the alert as expected. It appears to be clashing with the SweetAlert triggered in ...

javascriptsweetalert

Using Jquery to add elements one by one

Here is the Code for my project: Displayed below is the content of my CSV file: Item, Quantity, Price; LED, 100, $10; PIR, 1, $5; DS18B20, 10, $5; This segment showcases the jquery file I've composed: $(document).ready(function() { $.ajax({ ...

jqueryhtmlajaxcsvhtml-table

Implementing a codeigniter delete confirmation box with Javascript

I have tried numerous solutions on this site, but nothing seems to be working for me. I am trying to implement a pop-up window confirmation before deleting my data. Here is the code I am using: <a href="<?php echo site_url('admin/barang/delet ...

javascriptphpjquerycodeigniter

Adjust the value of an option within a select input using URL parameters

With regards to this page: I am in the process of developing a script that can extract a parameter from the URL to dynamically modify the select option, thus changing which vehicle is showcased alongside the Honda on the chart. I experimented with the fo ...

jqueryurlselectparameters

function to draw a table row in JavaScript with eloquent and descriptive arguments

I came across this code in chapter 6 of a programming book called "Eloquent JavaScript". I am struggling to understand where the arguments for the function 'drawRow' are coming from. If the outer function drawTable was a method, it would make sen ...

javascriptfunction

What is the best way to compare my filter search input with my regular expression?

My image gallery has a search field where I can type #cat to filter through the tags of my images extracted from a JSON file using a separate variable. However, the Regex I'm using searches for tags that partially contain the word, rather than the sp ...

javascriptjquery

Encountering issues when attempting to post JSON form data to a REST API via AJAX within a React

Recently, I created a basic SignUp page utilizing React and I am looking to transmit the form data to a REST API. In my setup, I have incorporated react.min.js, react-dom.min.js, and jquery.min.js. Here is the code snippet: <div id="container"></ ...

jqueryjsonajaxrestreactjs

The Google Maps geocoding service fails to provide accurate location information

I am currently attempting to utilize the Google Maps Geocoding API within my JavaScript code. Below is the snippet I have written: var geocoder = new google.maps.Geocoder(); function geocodeAddress() { var address = document.getElementById("address").v ...

javascriptgoogle-mapsgeocodinggoogle-geocoding-api

Exploring JSON parsing using javascript?

I'm currently attempting to work through this webRTC example and have encountered an issue that appears to be minor in nature... The if statement consistently fails to return true, despite the fact that the console message indicates that the property ...

javascriptjson

I want to know how to showcase elements from a list one by one and cycle through them using a button with a nodejs server and Pug

As someone who is brand new to Web development, NodeJs servers, and Pug, this is my first time diving into any of these technologies. My goal is to create a dynamic box (in the form of a div) that changes its content based on a list from a JSON file. Initi ...

javascripthtmlnode.jsexpresspug

A guide to incorporating partials into a multi-page form using Rails

Currently, I am in the process of converting Railscast #217. My goal is to modify a multi-partial form so that it dynamically loads the partials using AJAX. I operate a website where users can register for an account. Within the registration form, there ar ...

ajaxruby-on-rails-3jquery

Make sure to use dispatch when updating the array to prevent any potential infinite loops

I am currently working with JSX to create a function that reads user profiles and updates them upon clicking a button. The object userProfiles contains existing user profile data, which should be updated by combining the current contents with those from ne ...

javascriptreactjsreact-hooksjsx

The cross-domain AJAX request fails to receive a response

I am currently working on validating PAN card details. I am utilizing an AJAX call to verify the PAN card entered by the user, sending the PAN number to this URL: . The data is being sent to the following URL using AJAX call: function callbackFnc(data) { ...

javascriptphpjqueryajax

Having trouble accessing a DOM element within a Vue component while using vanilla JavaScript

I am attempting to dynamically update data from a Vue component using jQuery in a Webpack project. Below is the code snippet: <template> <div id="container"> <slot>show string!!</slot> <div id="s_container"&g ...

javascriptjquerywebpackvue.js

An effective method for converting MongoDB's JSON array of UTC dates to local time using Node.js

Using Node.js to query MongoDB and encountering an issue with Date (ISODate) fields. After querying, the Date format returned is as follows: DT : 2014-10-02T02:36:23.354Z The goal is to efficiently convert the DT field from UTC to Local Time ISOString. F ...

javascriptjsonnode.jsmongodb

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...

javascripthtmlcssgoogle-mapsgoogle-maps-markers

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

javascripthtmlcssvue.jsvuejs2

Troubleshooting: AngularJS ng-options failing to populate the list of objects

Having trouble populating a combo box in AngularJS. Here is the controller code snippet: var app = angular.module('app'); app.controller('roadmap', function($rootScope, $scope, $http, $q, leFactory) { $rootScope.activityInfoList=[ ...

javascriptangularjsjson

Customizing Big Cartel's Neat theme: A guide to eliminating the blur effect on featured product images upon site activation

My website is built on Big Cartel using the Neat theme. Every time the homepage loads, the Featured products images appear blurry for about 4 seconds, especially if you're not using Chrome browser. Is there a way to remove this blur effect? Thank yo ...

htmlblurrybigcartel

Is there a way to transfer a component as a prop to another component in React?

Just began my journey with React and coming from a Java background, please bear with me if the way I phrase this question is not quite right. I'm interested in "passing" an instance of a component to another component (which will then use that passed ...

javascriptreactjs