Actually I have a slider to display my menu, this menu slide from right to left to go to next level and left to right to return, but when I clicked on "return", yes, go back but at the same time return to the actual div, below is my code.
<div class="total">
<div class="slidepanel">
<center>
<button id="sleft">«</button>
<button id="sright">»</button>
</center>
<div class="box-wrapper">
<div class="block" id ="block1">
<ul id="mm-1" class="mm-list visible">
<li><a class="mm-next" href="#" data-target="#parent-1">parent 1</a></li>
<li><a class="mm-next" href="#" data-target="#parent2">parent 2</a></li>
<li><a class="mm-next" href="#" data-target="#parent-3">parent 3</a></li>
</ul>
</div>
<div class="block" id ="block2">
<ul id="women" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i> Return Home</a></li>
<li class="menu-title"><span>title parent 1</span></li>
<li><a class="mm-next" href="#" data-target="#women-features">sub parent 1</a></li>
</ul>
<ul id="men" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
<li class="menu-title"><span>title parent 2</span></li>
<li><a class="mm-next" href="#" data-target="#men-features">sub parent 2</a></li>
</ul>
<ul id="hilfiger" class="mm-list subCat-Mobile">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i>Return Home</a></li>
<li>title parent 3</li>
<li>Hombre</li>
</ul>
</div>
<div class="block" id ="block3">
<!-- women -->
<ul id="women-features" class="mm-list subCat-Mobile mm-listView">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#women">
<i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
<li class="menu-title"><span>title subcat 1</span></li>
<li>subcat 1</li>
<li>subcat 2</li>
</ul>
<!-- men -->
<ul id="men-features" class="mm-list subCat-Mobile mm-listView">
<li class="backMenu"><a class="mm-next icon backMenu" href="#" data-target="#men">
<i class="glyphicon glyphicon-triangle-left"></i>Return previous parent</a></li>
<li class="menu-title"><span>title subcat 2</span></li>
<li>subcat 1</li>
</ul>
</div>
</div>
</div>
</div>
my script is the next.
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
$(target).show();
return false;
});
$(document).ready(function() {
var cur = 1;
var max = $(".box-wrapper div").length;
$("#sright, li.backMenu a.mm-next.icon").click(function(){
if (cur == 1 && cur < max)
return false;
cur--;
$(".block").animate({"left": "+=24.9%"}, "slow");
});
$("#sleft, li a.mm-next").click(function(){
if (cur+1 > max)
return false;
cur++;
$(".block").animate({"left": "-=24.9%"}, "slow");
});
});
How can I prevent hide/show the container the same container? you can check the issue when you clicked on the option "return"?
here is my fiddle
If I understand your question correctly, why not just change the class names of your 'Return Home' options to something like mm-previous instead of mm-next? Then you can do the following:
$("#sright, li.backMenu a.mm-previous.icon").click(function(){
$(".block").animate({"left": "+=24.9%"}, "slow")
})
$("#sleft, li a.mm-next").click(function(){
$(".block").animate({"left": "-=24.9%"}, "slow")
})
Fiddle here.
The reason why it is going both ways for you, is that your selections trigger in both cases. So you need to setup a naming convention that helps you distinguish elements better.
Related
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>
This is the structure of my menu. I have attached the jQuery code below. The way this works is that when I click on Home Page, its parent element which is the list item has a class that is set to active.
At the moment, When I am at the Home Page, its list item has an active class. However, the list-items for Account Codes and Branches also have an active class set on it. How can I make sure that only my Home Page is affected?
Also, how can I change my jQuery code to work with this menu format where there is a new list within a list?
<ul class="sidebar-menu" id="navigation-menu">
<li><i class="far fa-square"></i><span>Home Page</span></li>
<li class="menu-header">Administrator Mode</li>
<li class="nav-item dropdown">
<i class="fas fa-fire"></i><span>Configuration</span>
<ul class="dropdown-menu">
<li>Account Codes</li>
<li>Branches</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
var current = location.pathname;
$("#navigation-menu a").each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
console.log($this);
$this.parent().addClass('active');
console.log("matched");
}
});
});
</script>
Dropdown Layout
The most effective HTML layout pattern for dropdown menus is to alternate between <ul>/<ol> and <li>:
<ul>
<li class='dropdown'>
Dropdown
<ul class='menu' style='display:none'>
<li>Item</li>
<li class='dropdown'>
<a href='#/'>Dropdown</a>
<ul class='menu' style='display:none'>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
Also, if you want the menus to be initially closed, add the following inline style:
<ul class='menu' style='display:none'>
The <a>nchors have default behavior that is hard to override when using a framework like Bootstrap or Foundation. Try toggling the .active class on .has-dropdown children tags.
Demo
Details commented in demo
/*
Delegate click event to each .has-dropdown
Toggle .active class on that particular .has-dropdown children tags
Get next .dropdown-menu and toggle it up/down and toggle .active
*/
$('.has-dropdown').on('click', function(e) {
$(this).children().toggleClass('active');
$(this).next('.dropdown-menu').slideToggle().toggleClass('active');
});
.active {
color: tomato
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css' rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<ul id="navigation-menu" class="sidebar-menu">
<li>
<a href="#/" class="nav-link">
<i class="fas fa-home"></i><span> Home Page</span>
</a>
</li>
<li class="menu-header">
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-tools"></i><span> Administration</span>
</a>
<ul class="nav-item dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-lock"></i><span> Security</span>
</a>
<ul class="dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link">
<span> Account Codes</span>
</a>
</li>
<li>
<a href="#/" class="nav-link">
<span> Branches</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-cog"></i><span> Configuration
</span></a>
<ul class="dropdown-menu" style='display:none'>
<li>
<span> Layout</span>
</li>
<li>
<span> Assets</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
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 -->
I have a jQuery question.
I have a multiple groups of images which show / hide by clicking some corresponding links. The markup looks like this:
<div class="feature-wrap">
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
<li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature01"><img src="myimage.jpg"/></li>
<li class="fadeitem feature-slide feature02"><img src="myimage.jpg"/></li>
</ul>
</div>
There's some CSS to hide things by default:
.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}
And here's the jQuery:
$('.feature-link').click(function(event) {
event.preventDefault();
var feature = $(this).data('category');
$('.fadeitem').hide();
$('.' + feature).fadeIn(500);
$('.feature-link').removeClass('current');
$('.feature-link.' + feature).addClass('current');
});
This works fine, until I add another block:
<div class="feature-wrap">Another set of this</div>
because the all the 'fadeitem's on the page will disappear. My question: how can I best target only the items within this group?
Here's a pen: http://codepen.io/regmtait/pen/NdLqvP
You should use the current object this to target the parent feature-wrap, check the snippet below.
Hope this helps.
$('.feature-link').click(function(event) {
event.preventDefault();
var feature = $(this).data('category');
var parent = $(this).closest('.feature-wrap');
$('.fadeitem', parent).hide();
$('.' + feature).fadeIn(500);
$('.feature-link', parent).removeClass('current');
$('.feature-link.' + feature, parent).addClass('current');
});
.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-wrap">
<h2>First set of images</h2>
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
<li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
<li><a class="feature-link" data-category="feature03" href="#">Item 3</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature01"><img src="http://placehold.it/200x100/00ff00"/></li>
<li class="fadeitem feature-slide feature02"><img src="http://placehold.it/200x100/ffff00"/></li>
<li class="fadeitem feature-slide feature03"><img src="http://placehold.it/200x100/ff00ff"/></li>
</ul>
</div>
<div class="feature-wrap">
<h2>Second set of images</h2>
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature04" href="#">Item 4</a></li>
<li><a class="feature-link" data-category="feature05" href="#">Item 5</a></li>
<li><a class="feature-link" data-category="feature06" href="#">Item 6</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature04"><img src="http://placehold.it/200x100/00ff00"/></li>
<li class="fadeitem feature-slide feature05"><img src="http://placehold.it/200x100/ffff00"/></li>
<li class="fadeitem feature-slide feature06"><img src="http://placehold.it/200x100/ff00ff"/></li>
</ul>
</div>