Develop Reference

I want to add delay to my menu when pictures are changing. How is it possible?

These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
<!-- header --
<nav class="nav">
<ul>
<li>
<a href="" data-index="1">
Home
</a>
</li>
<li>
<a href="" data-index="2">
About Us
</a>
</li>
<li>
<a href="" data-index="3">
Services
</a>
</li>
<li>
<a href="" data-index="4">
Shop
</a>
</li>
<li>
<a href="" data-index="5">
Our Teams
</a>
</li>
<li>
<a href="" data-index="6">
Blog
</a>
</li>
<li>
<a href="" data-index="7">
Contact Us
</a>
</li>
</ul>
</nav>
These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
jQuery
// menu toggler click event
$(".menu-toggler").click(function() {
$(this).toggleClass("menu-toggler-close");
$(".nav").fadeToggle();
});
$(".nav").click(function() {
$(".menu-toggler").removeClass("menu-toggler-close");
$(".nav").fadeOut();
});
$(".nav > ul").click(function(e) {
e.stopPropagation();
});
$(".nav > ul > li > a").hover(
function() {
var dataIndex = $(this).data("index");
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
},
function() {
$(".nav").css("background", "rgba(0, 0, 0, 0.8)");
},

You can use setTimeout() method to delay your code.
setTimeout(function()
{
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
}, 1000);

How to select value of dropdown with ul

Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?

First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect.
What I am trying to do is as given below:
Script:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function () {
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
Thank you in advance.

Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding
$(document).ready(function () {
$(document).on('click','ul.treeview-menu a.links',function () {
$("body").addClass("sidebar-collapse");
});
});
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

you have two issues:
1- this line //}); it was commented and was preventing your code from working.
2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.
try this:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>

$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("Enter your class name");
});
});

When User Open One DropDown Close Other DropDowns

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>

Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle

I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}

Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)

This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.