Remove attribute of parent only? - javascript

I'm looking to remove the href attribute of the first link, at the moment it removes the attribute of ALL the links.
$("#menu-item-2003 a").removeAttr('href');
This is my html setup:
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>


If you just want to remove the href of the first a, use direct descendent selector:
$("#menu-item-2003 > a").removeAttr('href');
The one which you use currently allows selection of the children at any level, which was causes the issue.
Working demo:
$("#menu-item-2003 > a").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Alternatively, if a is not a direct descendent, you can use the :first pseudo class to select the very first tag:
$("#menu-item-2003 a:first").removeAttr('href');


you can use first() in jquery
$("#menu-item-2003 a").first().removeAttr('href');


With First
Using .first() method
$("#menu-item-2003 a").removeAttr('href');
$("#menu-item-2003 a").first().removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :first Selector
$("#menu-item-2003 a:first").removeAttr('href');
$("#menu-item-2003 a:first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":first").removeAttr('href');
$("#menu-item-2003 a").filter(":first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
With eq
Using .eq() method
$("#menu-item-2003 a").eq(0).removeAttr('href');
$("#menu-item-2003 a").eq(0).removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :eq() Selector
$("#menu-item-2003 a:eq(0)").removeAttr('href');
$("#menu-item-2003 a:eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

Related

add an active class to one of my elements and select only the relevant parent

In my menu I would like to add an active class to one of my elements: li.nav-item
and this only if the child item: ul.nav-collapse.li has the active class.
for this I made a script that works but it adds the active class to all elements: li.nav-intem
I would like it to select only the relevant parent: li.nav-item
which contains the active class ul.nav-collapse.li.active
JS
$('ul.nav-collapse li').each(function(){
if($(this).hasClass('active')) {
$(this).parent().parent().parent().parent().find('li.nav-item').addClass("active");
}
});
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
I would like something like this
<ul>
<li class="nav-item active">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
any idea?

Check if current element has class "active"
Use closest to get parent element with specific class :
https://api.jquery.com/closest/
Then add class to the current element
$('ul.nav-collapse li').each(function() {
// if current item has class active
if ($(this).hasClass("active")) {
// add class to the current clicked element
$(this).closest('.nav-item').addClass("active");
}
});
.nav-item.active { border:1px solid red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

Closest Image from li

I want to animate only the menu icons. If I remove the closest('img') it animates the whole li.
This doesn't work:
//animate menu icons
$('.nav-item').hover(function() {
console.log('entered');
$(this).find('img').toggleClass('animated swing');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="dashboard">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-pages">
<img src="../resources/img/icons/docker-icon.png" alt="">
<span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
</a>
<div class="collapse" id="docker-pages">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="docker-status">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Status</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="container-creation">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Creation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-logs">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Logs</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-console">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Console</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-images">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-volumes">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Volumes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-info">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Information</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

Your HTML is structured in such a way that you have .nav-item nested inside .nav-item. The <li> element is a block level element and in your dom hierarchy you have one large block level element (the third <li> from your example) on which you apply a hover. In this one block level element there are many images (which happen to be inside other .nav-item and perhaps this is confusing you). This large hover area created by the third <li> is causing all of the nested images to toggle.
To fix your specific example, you can isolate each hover action to the .nav-item a selector before doing the find operation to get specific child images for each anchor instead of each list item.
$('.nav-item a').hover(function() {
$(this).find('img').toggleClass('animated swing');
});

Try this code.
//animate menu icons
$('.nav-link').hover(function() {
console.log('entered');
$(this).find('.menu-image').toggleClass('animated swing');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="dashboard">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-pages">
<img class="menu-image" src="../resources/img/icons/docker-icon.png" alt="">
<span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
</a>
<div class="collapse" id="docker-pages">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="docker-status">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Status</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="container-creation">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Creation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-logs">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Logs</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-console">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Console</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-images">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-volumes">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Volumes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-info">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Information</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

How to keep parent li opened when i clicked the child li element

<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements

Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>

superfish+ slicknav not work

I have a problem on menu of website,this menu have more section and in desktop version is suddivise in two part , the first is normal menu the second use jquery superfish for drop-down menu in desktop.
In mobile use only slicknav, http://slicknav.com/
every work fine , but have a problem , if example open the menu in desktop and after try to resize the screen of desktop the superfish not switch with slicknav, only if reload the page work and load correct class.
The same in viceversa:
If open menu in slow screen and after try to open not switch to superfish
in practice should change class to a same <div class=""> to use in desktop superfish and slicknav in Mobile
ii have used this script but not work
<script>
function resize() {
if ( $(window).width() < 739) {
$("#nullo").toggleClass('sf-menu cambioclasse2');
}
else {
$("#nullo").toggleClass('sf-menu sf-menu');
}
}
$(window).on("resize", resize);
resize(); // call once initially
</script>
The class="cambioclasse2 " in a class i have used for annulled the class of superfish "sf-menu"
Menu in desktop:
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li>Home</li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li><span class="current-lang">ita</span> | ENG</li>
menu in mobile:
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li>Home</li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li><span class="current-lang">ita</span> | ENG</li>

Dropdown Menu About

I want to do a dropdown menu. Cover a distance. But I have a problem. When I click the product menu and opening menu after product menu with the open, click the references menu opening. But click the both menu it can be break down. This problem because of Javascript. Below I share my code also Html and Javascript. I wait for your help.
---HTML---
<div class="cbp-hsinner">
<ol class="parent">
<li>Home</li>
<li>About</li>
<li>
Product
<ol class="child">
<li>
<a href="#">
<img src="img/logom.jpg" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>
References
<ol class="child">
<li>
<a href="#">
<img src="img/1.png" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>Contact</li>
</ol>
</div>
---JavaScript---
$('.child').hide();
$('.parent > li > a').click(function () {
$(this).parent().find('.child').slideToggle('slow');
});

You have to hide all menu before opening a menu.
You can use this code.
$('.child').hide();
$('.parent > li > a').click(function () {
$('.parent').find('.child').hide(); // this will hide menu
$(this).parent().find('.child').slideToggle('slow');
});

Categories

Resources