I have an accordian style menu which works fine on hover state but I'd like to change to to click instead...
<script type="text/javascript">
$(document).ready(function(){
$('#nav > li').hover(
function() {
if ($('> span',this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span',this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span',this).addClass('active');
}
},
function() {
$('#nav li ul').slideUp();
$('#nav li a').removeClass('active');
});
});
</script>
But simply replacing hover with click doesn't work, any advise much appreciated I'm a designer so my JS is pretty poor :)
Try this,
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li').click(function () {
if ($('> span', this).attr('class') != 'active') {
$('#nav li ul').slideUp();
$('span', this).next().slideToggle();
$('#nav li span').removeClass('active');
$('> span', this).addClass('active');
}
}).mouseout(function (e) {
if ($(e.target).parents().find('#' + $(this).attr('id')).length) return;
$('#nav li ul').slideUp();
$('#nav li span').removeClass('active');
});
});
</script>
HTML:
<li id="t1"><span>Nav item click me 1</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>
<li id="t2"><span>Nav item click me 2</span>
<ul>
<li>Sub link 1</li>
<li>Sub link 2</li>
<li>Sub link 3</li>
<li>Sub link 4</li>
</ul>
</li>
.hover(fucntion() {}, function()); // .hover() accept two function
.click(function() {}); // only accept one
try
$('selector').on('click', function() {
if($(this).hasClass('active')) {
// do something if this has class active
}
else {
// do something if not.
}
} );
Related
This is my html:
<ul>
<li>
List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
<li>
List 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
And this js:
$('ul li ul').hide();
$('ul li').click(function() {
$(this).children().slideToggle();
});
I want to create slidetoggle, for example: when user click "List" and after open this user click List 2 then list one is hiding.
DEMO: http://jsfiddle.net/7dxAb/
I want only one open when user click.
Thanks!
Try this:
$('ul li ul').hide();
$('ul li').click(function() {
var _this = $(this);
_this.children().slideToggle();
$('ul > li').not(_this).children('ul').slideUp();
});
You hide "ul"s in all ListN elements except one that is clicked.
You can slideUp() all the other ul's before the slideToggle() like this:
$('ul li').click(function() {
$(this).parent().find('ul').slideUp();
$(this).children().slideToggle();
});
I'm not sure if this is the most effecient way tho.
Add
$('ul li ul').slideUp();
to the click event. This will hide the other uls.
The finished code would look like:
$('ul li ul').hide();
$('ul li').click(function() {
$('ul li ul').slideUp();
$(this).children().slideToggle();
});
http://jsfiddle.net/yvPFx/2/
Edit: You can use a class to keep track of what is showing.
http://jsfiddle.net/yvPFx/3/
Try this:
$('ul li ul').hide();
$("ul li").click(function () {
$(this).children().slideToggle("slow", function() {
//
});
$(this).siblings().children().slideUp("slow");
});
I have nested unordered list.
<ul id="catalogue">
<li>List
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2
<ul>
<li>Item 1.2.2.1</li>
</ul>
</li>
<li>Item 1.2.3</li>
</ul>
</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
At the beginning only the very top level shows, but if you click on each LI, if there's a child UL in it, it should display the next lever, and so on. If you click on the same LI again, the level below should become hidden.
$(document).ready(function () {
$('#catalogue li').each(function () {
$(this).contents().first().wrap("<span/>")
});
$('#catalogue li > span').addClass('brd');
$('ul').hide();
$('#catalogue').show();
$('#catalogue li').click(function () {
var nxt = $(this).children('ul:first')
if ($(nxt).is(":visible")) {
$(nxt).slideUp();
} else {
$(nxt).slideDown();
}
$(this).parent().show();
});
});
If a user clicks on a sibling LI and it has a child UL, that UL should show but any sibling's ones should close.
You need to stop the event from propagating to the parent. Clicking on each li will invoke its own click handler and the event will propagate to its parent li invoke its handler and so on. So you can just stop it at one level by using event.stopPropagation(). And you can use slideToggle to toggle the current state of the element.
Try:
$('#tree li').click(function (e) {
e.stopPropagation();
$(this).children('ul:first').slideToggle();
});
Demo
And if you want to slide up while clicked on its sibling then,
$('#tree li').click(function (e) {
e.stopPropagation();
var $this = $(this);
$this.children('ul:first').slideToggle().end()
.siblings().children('ul:visible').slideUp();
//Code Broken down
//$this.children('ul:first').slideToggle();
//$this.siblings().children('ul:visible').slideUp();
});
Demo
I want to create an accordion menu with jQuery which remembers the active page. Now i've got the following menu:
<nav id="secondary">
<ul id="nav">
<li class="tournament">
<a onclick="function">Belgie</a>
<ul class="sub" style="display: none;">
<li>
<li class="first">tournament1</li>
<li class="last">test</li>
</li>
</ul>
</li>
<li class="tournament">
<a onclick="function">Nederland</a>
<ul class="sub" style="display: none;">
<li>
<li class="first">Nedtournament1</li>
<li class="has_children current">
Nedtournament2
<ul class="dropdown">
<li class="first">subtournament2-1</li>
<li class="last current">subtournament2-2</li>
</ul>
</li>
<li>Nedtournament3</li>
<li class="last">Nedtournament3</li>
</li>
</ul>
</nav>
Im using the following jQuery, it sets a cookie to determine on which page we are and which menu should be expanded. This works, but not for the children pages.
// creatie cookie
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
// use cookie value
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
// complete jquery
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
});
does anyone know how I can add the cild pages to they expand when I click them? And they keep expanded when i reload the page.
Is it possible to show and hide partially with jquery sliding functions?
Basically, there's a list with 7 items. But only the 1st two are showing initially, while the rest is hidden. I want that when the user clicks to view more, all 7 items should show. And when he/she clicks again only the 1st two are showing and the rest is hidden again. But I can't manage to do it. Please give me some light, thanks.
jquery:
var ul = $('ul'),
showMoreLnk = $('a.show-more');
$('a').click(function(e){
if(ul.outerHeight() === 38){
ul.find('li.hide').removeClass('hide').addClass('show');
ul.slideDown(function(){
showMoreLnk.text('Show less');
});
} else {
ul.slideUp(function(){
showMoreLnk.text('Show more');
ul.find('li.show').removeClass('show').addClass('hide');
});
}
e.preventDefault();
});
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hide">Item 3</li>
<li class="hide">Item 4</li>
<li class="hide">Item 5</li>
<li class="hide">Item 6</li>
<li class="hide">Item 7</li>
</ul>
show more
CSS:
.hide{
display: none;
}
.show{
display: block;
}
Try this:
$('a').click(function (e) {
e.preventDefault();
$('ul li.hide').slideToggle('slow');
});
Check this out.
http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/
and the example:
http://sim.plified.com/jQuery/slide/#
Check out this code:
$('a.show-more').click(function (e) {
e.preventDefault();
var hidden_list = $('ul li.hide');
if (hidden_list.is(':hidden')) {
$(this).html("show less");
hidden_list.slideDown();
}
else {
$(this).html("show more");
hidden_list.slideUp();
}
});
I also created this for you to test in fiddle http://jsfiddle.net/Shanison/H4vbB/2/
I'm building a simple dropdown where I'd like to add a class to parent if UL exists:
HTML:
<ul id="menu">
<li>Parent 1</li>
<li>Parent 2
<ul>
<li>Sub 2.1</li>
<li>Sub 2.2</li>
</ul>
</li>
</ul>
So I'd like to:
hide all nested (ul#menu > li > ul) ul's initially
show/hide nested ul on hover
addClass "dropdown" to parents that have nested ul's
This isn't quite working, not sure why:
$(function () {
$("ul#menu li").hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
},
function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
});
$("ul#menu li ul li:has(ul)").find("a:first").addClass("dropdown");
});
Many thanks for your help!
var ul = $('#menu');
if (ul.length) {
ul.children('li').hover(function() {
$(this).children('ul').show();
}, function() {
$(this).children('ul').hide();
}).children('ul').hide().parent().addClass('dropdown');
}
Demo: http://jsbin.com/ofayu
BTW: you are closing the <li> tags incorrectly in your markup.
You wrote:
$("ul#menu li ul li:has(ul)")
Given your HTML structure, shouldn't this be:
$("ul#menu li:has(ul)")
This should do the trick (untested):
$('ul#menu > li > ul').each(function()
{
var list = $(this);
list.hide();
list.parent().hover(list.hide, list.show);
list.parent().parent().addClass('dropdown');
});