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>
Related
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.
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 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'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it,
When I click the link the side-nav close
code:
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<div class="background">
<img src="<?php echo $srcurl; ?>/cover.png">
</div>
<img class="circle" src="<?php echo $srcurl; ?>/logo.png">
<span class="black-text name">DIGINEWS</span>
</div>
</li>
<li><center>MENU</center></li>
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<script> $(".button-collapse").sideNav(); </script>
</div>
</nav>
</div>
Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.
Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer
$( document ).ready(function(){
$('.button-collapse').sideNav({
closeOnClick: true
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="#">Home</a></li>
<li><a class="waves-effect" href="#">About us</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><center>MENU</center></li>
<li><a class="waves-effect" href="#!">Home</a></li>
<li><a class="waves-effect" href="#!">About us</a></li>
</ul>
simply code below....
you need to add CDN of materialize sc,js and jquery js
Here is your fix nav bar
<div class="navbar-fixed">
<nav class="nav-wrapper">
<div class="container">
Picnic.lk
<a href="" class="sidenav-trigger" data-target="mobile-menu">
<i class="material-icons">menu</i>
</a>
<ul class="hide-on-med-and-down right">
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
</nav>
</div>
your mobile nav bar (side nav)
<ul class="sidenav grey lighten-2" id="mobile-menu">
<li><a class="sidenav-close" href="#photos">Photos</a></li>
<li><a class="sidenav-close" href="#services">Services</a></li>
<li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>
Add below js code
<script>
$(document).ready(function(){
//side navigation
$('.sidenav').sidenav({
//your additional code goes here
});
});
I have a horizontal list menu and another horizontal list sub menu for each menu item.
Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.
Can someone show me how to do it using javascript or jquery or css only?
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
<li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
<ul>
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</div>
<div id="sc2" class="tabcontent">
<ul>
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</div>
<div id="sc3" class="tabcontent">
<ul>
<li><a id="link3-1" href="http://test.com">Link 3a</a></li>
<li><a id="link3-2" href="http://test.com">Link 3b</a></li>
</ul>
</div>
</DIV>
here's an example to point you in the right direction.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
ul, li
{
display: block;
}
.sublinks
{
display: none;
}
</style>
</head>
<body>
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1">
<a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
<ul class="sublinks">
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</li>
<li class="basictab1" id="li2">
<a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
<ul class="sublinks">
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<script>
$('.basictab1').hover(function()
{
$(this).find('ul').toggle();
});
</script>
</body>
</html>