I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.
$(".clickedLink").parent().parent().css('background-color', 'green');
Could someone help me how to select elements?
Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I would appreciate it if anyone can help me out
You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.
$('a').click(function() {
var parents = $(this).parents('.collapse');
parents.css('border-top', '1px solid red');
parents.prev().css('border-top', '1px solid blue');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
Related
I am trying to check each instance of .menu-section to see if the .menu-title div contains a h3 title. If it does then it should output the appropriate console.log message. I can't figure out where I am going wrong as logically it seems to make sense to me. Any help would be awesome.
$(".menu-section").each(function() {
if ($('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
Working CodePen: https://codepen.io/nickelse/pen/zQExRd?editors=1111
The problem is because you're looking at all .menu-title elements in the each() loop, not just the one within the current .menu-section element. You need to use the this keyword to reference the current element, then find() the element you're looking for:
$(".menu-section").each(function() {
if ($(this).find('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
I have a menu which has categories with subcategories. I want to show/hide the list elements but the catch is I need the first 2 elements to show all the time. I have tried to look for the solution everywhere and the closest I came was jQuery toggle show/hide elements after a certain number of matching elements
but this doesn't seem to be working for me as my filters are little more complicated. Can someone please help me with this. Clicking on 'Sub-Categories' shows/hides links.
Also i must add the default state must be collapsed.
My basic fiddle without any style
HTML code:
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
jQuery code:
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
});
jQuery('.subCat').click(function () {
jQuery(this).prev('ul:first.level1').slideToggle();
});
To achieve expected result, use below option
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
Subcategories parent
Find li greater than 1 (li's index starts from 0 )
Hide by default, using jQuery(this).find('li:gt(1)').hide()
code sample for reference - https://codepen.io/nagasai/pen/omYKzv?editors=1010
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
jQuery(this).find('li:gt(1)').hide()
});
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level 1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
Change your javascript that do the slideToggle as this;
jQuery('.subCat').click(function () {
var ul = jQuery(this).prev('ul:first.level1');
var li = ul.find('li:gt(1)');
li.slideToggle();
});
I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.
What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is
under the menu item clicked. Is there any way to do that without having to specify id?
Below is my menu:
$('.menu-item').on('click', function() {
$('.dropdown-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
you need to use children() function to toggle the children of particular DOM
so use $(this).children("ul").toggle(); to accomplish what you are looking for
$('.menu-item').on('click', function() {
$(this).children("ul").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'>
<span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.
$('.menu-item').on('click', function() {
$(this).find(".dropdown-content").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.
Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.
I am trying to create previous parent and grandparent level text as object using function
For example on element grandchild11
<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>
I am facing issue in creating object for attribute parobj as shown above for every anchor tag and I have even tried adding class with levels but failing to get exact output
is there anyway to get parobj as mentioned above either by hover or clicking anchor tag?
Codepen URL for reference:
http://codepen.io/divyar34/pen/bqMaQY
HTML:
$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call
function getParent(val) {
var obj = [val];
obj.push($(val).parent().text());
return obj
}
function getOther(val) {
//just for reference, but originaly using internal api
$.get('otherinfo.html', {
option: val
}, function(data) {
console.log(data);
return data.name
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-1">Parent1
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-9"> <a class="level-10" href="#">Child1</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-9"> <a class="level-10" href="#">Child2</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
<li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent1 -->
<div class="level-1">Parent2
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-7"> <a class="level-8" href="#">Child1</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-7"> <a class="level-8" href="#">Child2</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
<li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent2 -->