Closest Image from li - javascript

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>

Related

Menu having options in multiple columns on demand

I have been using CSS for multi-column view styles for mega menu. Right now the menu is showing the submenu items in multi-column but the issue I am facing is those submenu items get started in new column although there exists sufficient space in the earlier column.
i.e. For example, I have 31 submenu options and per column 12 submenu items can be listed. Hence it should display like 12 menu items in column 1, another 12 in column 2 and rest in column 3. But, due to some unknown reason. It shows only 10 sub menu items in columns 2 and rest in column 3.
You can review the same via image preview using the below link :
http://prntscr.com/oe22lu
We worked on to implement few CSS scripts to make the submenu items visible as we needed.
<div class="main-megamenu notmobile">
<ul class="navbar-nav">
<li class="nav-item dropdown" data-id="23">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-products" role="button">
<span class="category-name">EASY SERVO PRODUCTS</span>
</a>
<div class="catlevel-1">
<div class="dropdown-menu">
<div class="nav-items menu-options">
<div class="nav-item dropdown" data-id="24">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-motors" role="button">
<span class="category-name">Easy Servo Motors</span>
</a>
</div>
<div class="nav-item dropdown" data-id="40">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/2-phase" role="button">
<span class="category-name">2 Phase</span>
</a>
</div>
<div class="nav-item" data-id="42">
<a class="nav-link" href="/hybrid-stepper-motor-2">
<span class="category-name">Hybrid Stepper Motor</span>
</a>
</div>
</div>
<div class="nav-items menu-options-details">
<div class="submenu-details-wrapper" id="submenu-details-wrapper-24" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-24">
<div class="nav-item dropdown catlevel-2" data-id="25">
<a class="nav-link dropdown-toggle" href="/low-vdc-input">
<span class="category-name">Low VDC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-25">
<div class="nav-item" data-id="51">
<a class="nav-link" href="/2-phase-nema-14">
<span class="category-name">2 Phase NEMA 14</span>
</a>
</div>
<div class="nav-item" data-id="52">
<a class="nav-link" href="/2-phase-nema-16">
<span class="category-name">2 Phase NEMA 16</span>
</a>
</div>
<div class="nav-item" data-id="53">
<a class="nav-link" href="/vdc-or-transformer-input">
<span class="category-name">VDC or Transformer Input</span>
</a>
</div>
<div class="nav-item" data-id="54">
<a class="nav-link" href="/220230-vac-input">
<span class="category-name">220/230 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="61">
<a class="nav-link" href="/budge-stepper-drives">
<span class="category-name">Budge Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="62">
<a class="nav-link" href="/motor-extension-cables">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="27">
<a class="nav-link dropdown-toggle" href="/120-230-vac-input">
<span class="category-name">120 / 230 VAC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-27">
<div class="nav-item" data-id="57">
<a class="nav-link" href="/digital-stepper-drives">
<span class="category-name">Digital Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="58">
<a class="nav-link" href="/classic-stepper-drives">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="59">
<a class="nav-link" href="/stepper-drive-modules">
<span class="category-name">Stepper Drive Modules</span>
</a>
</div>
<div class="nav-item" data-id="60">
<a class="nav-link" href="/servo-motors-2">
<span class="category-name">Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="47">
<a class="nav-link dropdown-toggle" href="/2-phase-2">
<span class="category-name">Easy Servo Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-47">
<div class="nav-item" data-id="1056">
<a class="nav-link" href="/brushless-servo-products">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1057">
<a class="nav-link" href="/brush-servo-products">
<span class="category-name">Brush Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1058">
<a class="nav-link" href="/unregulated-switching">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1059">
<a class="nav-link" href="/motor-extension-cables-2">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1060">
<a class="nav-link" href="/advanced-digital-stepper-drives-2">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="48">
<a class="nav-link dropdown-toggle" href="/3-phase">
<span class="category-name">Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-48">
<div class="nav-item" data-id="1061">
<a class="nav-link" href="/110120-vac-input">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1062">
<a class="nav-link" href="/bldc-servo-motors">
<span class="category-name">BLDC Servo Motors</span>
</a>
</div>
<div class="nav-item" data-id="1074">
<a class="nav-link" href="/unregulated-switching-4">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="49">
<a class="nav-link dropdown-toggle" href="/5-phase">
<span class="category-name">High Torque Stepper Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-49">
<div class="nav-item" data-id="1063">
<a class="nav-link" href="/motor-extension-cables-3">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1064">
<a class="nav-link" href="/unregulated-switching-2">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="50">
<a class="nav-link dropdown-toggle" href="/09">
<span class="category-name">0.9</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-50">
<div class="nav-item" data-id="1065">
<a class="nav-link" href="/brush-servo-motors">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="55">
<a class="nav-link dropdown-toggle" href="/advanced-digital-stepper-drives">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-55">
<div class="nav-item" data-id="1066">
<a class="nav-link" href="/classic-stepper-drives-2">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="56">
<a class="nav-link dropdown-toggle" href="/integrated-easy-servo-motors">
<span class="category-name">Integrated Easy Servo Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-56">
<div class="nav-item" data-id="1067">
<a class="nav-link" href="/stepper-drives-with-oscillators">
<span class="category-name">Stepper Drives with Oscillators</span>
</a>
</div>
</div>
</div>
</div>
<div class="submenu-image" id="submenu-image-24">
<img src="../images/thumbs/000/0000233_easy-servo-motors_370.png">
</div>
</div>
<div class="submenu-details-wrapper" id="submenu-details-wrapper-40" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-40" style="min-height: 217px;">
<div class="nav-item dropdown catlevel-2" data-id="41">
<a class="nav-link dropdown-toggle" href="/geared-motors-2">
<span class="category-name">Geared Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-41">
<div class="nav-item" data-id="1072">
<a class="nav-link" href="/110120-vac-input-2">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1073">
<a class="nav-link" href="/motor-extension-cables-4">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1075">
<a class="nav-link" href="/brush-servo-motors-2">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item" data-id="1068">
<a class="nav-link" href="/brushless-servo-products-2">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1069">
<a class="nav-link" href="/brushless-servo-products-3">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1070">
<a class="nav-link" href="/unregulated-switching-3">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1071">
<a class="nav-link" href="/advanced-digital-stepper-drives-3">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" data-id="22">
<a class="nav-link" href="/others-2">
<span class="category-name">OTHERS</span>
</a>
</li>
<li class="mobile-menu-items"></li>
</ul>
I need to show sub-menu items in multi-column vertically, such that additional column is used only if sufficient menu items exist. You can review the same via the image preview - http://prntscr.com/oe28im

Replace iFrame src, on click?

Currently I have the list below which needs to update the iFrame inside of an existing div.
<div class="stream">
<iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
The above portion is the iFrame we need to update, the below portion is the list of streams we have to choose from on click.
<ul>
<li class="anime">
<a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
"1">Vidstreaming<span>Choose this server</span></a>
</li>
<li class="vidcdn">
<a class="" data-video="https://someexamplewebsite.com" href="#" rel="100">Vidcdn<span>Choose
this server</span></a>
</li>
<li class="streamango">
<a data-video="https://someexamplewebsite.com" href="#" rel="12">Streamango<span>Choose this server</span></a>
</li>
<li class="rapidvideo">
<a data-video="https://someexamplewebsite.com" href="#" rel="21">Rapidvideo<span>Choose this server</span></a>
</li>
<li class="estram">
<a data-video="https://someexamplewebsite.com" href="#" rel="7">Estream<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="16">Oload<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="5">OpenUpload<span>Choose this server</span></a>
</li>
<li class="mp4">
<a data-video="https://someexamplewebsite.com" href="#" rel="3">Mp4Upload<span>Choose this server</span></a>
</li>
</ul>
I am wondering how we can make this work easily, and in a way that if the a has a class of active then the iframe is updated with that portions data-video then unsetting the default active on click of another a href

<div class="stream">
<iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>
<ul>
<li class="anime">
<a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
"1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
</li>
<li class="vidcdn">
<a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
this server</span></a>
</li>
<li class="streamango">
<a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
</li>
<li class="rapidvideo">
<a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
</li>
<li class="estram">
<a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
</li>
<li class="mp4">
<a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
</li>
</ul>
<script>
function changeSource(e){
var t = e.getAttribute("data-video");
document.getElementById("iFrameElement").src=t;
}
</script>
<div class="stream">
<iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>
<ul>
<li class="anime">
<a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
"1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
</li>
<li class="vidcdn">
<a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
this server</span></a>
</li>
<li class="streamango">
<a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
</li>
<li class="rapidvideo">
<a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
</li>
<li class="estram">
<a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
</li>
<li class="open">
<a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
</li>
<li class="mp4">
<a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
</li>
</ul>
<script>
function changeSource(e){
var t = e.getAttribute("data-video");
document.getElementById("iFrameElement").src=t;
var eSet = document.getElementsByTagName("a");
var i = 0;
while(i < eSet.length){
eSet[i].className = "";
i++;
}
e.className = "active";
}
</script>

Remove attribute of parent only?

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>

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