highlight or add class to parent li element in click - javascript

I am learning jquery and css.
I have menu items which look like this. You can see css,html, jquery here http://jsfiddle.net/rZR2Y/
html
<div id="nav">
<ul>
<li>Home
<ul>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog1</li>
<li>Blog2</li>
<li>Blog3</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
jquery
$( document ).ready( function() {
$( '#nav > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
$( '#nav > ul > li > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).parent('li').addClass( 'selected' );
});
});
css
#nav .selected a{background:red;display:block}
What I would like to have is, when I click sub li items ie Home1/home2/home3, then parent li ie Home should be highlighted.
I am doing something wrong in selector selection. Also, any other better solutions are also welcome.
Thanks.
UPDATE:
I am sorry, my original markup was wrong. Closing sub li should naturally come after all submenu items.
Does this now change all jquery ?
Thanks for your answers.
I would very much appreciate some explanation, so that I also learn what I am doing wrong.
UPDATE2:
After updating my markup, and also css like this
#nav .selected > a{background:red;display:block}
even my original solution works. Just learnt few css and jquery stuffs. Thanks everyone.
Updated fiddle with updated markup and css and original jquery is here
http://jsfiddle.net/rZR2Y/26/

Your selector for sub-level li elements was incorrect, it should be #nav > ul > ul > li.
Try this:
$( document ).ready( function() {
$( '#nav > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
$( '#nav > ul > ul > li' ).click( function() {
$( '#nav > ul' ).children('li').removeClass();
$( this ).parent('ul').prev().addClass( 'selected' );
});
});
Example fiddle

Given your code, you could use:
$('#nav').on('click', 'li', function () {
$('#nav li').removeClass('selected');
$(this).parentsUntil('#nav', 'li').add(this).addClass('selected');
return false;
});
Though I have my doubts that this is what you're looking for. Maybe try also changing your css to:
#nav .selected > a{background:red;display:block}
demo: http://jsfiddle.net/F8dbG/2/
updated using a the additional selector for on to reduce number of event bindings. (thanks #diEcho)

You could do
$( document ).ready( function() {
$( 'li' ).click( function() {
$( 'li').removeClass('selected' );
var $this = $( this );
$this.addClass( 'selected' );
$this.parent().prev().addClass( 'selected' );
});
});
fiddle here http://jsfiddle.net/rZR2Y/22/

Related

Hamburger toggle menu for one page site

I am developing a super simple site using jQuery and bootstrap libraries but I would like the menu items to jump to the section (already done with anchors). But when I navigate back to the top the menu dropdown is still open. How would I setup up a toggle so it closes on clicking a menu item?
This is my initial code:
$( document ).ready(function() {
$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
});
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<div class="menu">
<ul>
<li>Home</li>
<li>Jeff Anderson</li>
<li>Hand Built Frames</li>
<li>Bike Repairs and Maintenance</li>
<li>Frames and Accessories</li>
<li>Contact</li>
</ul>
</div>
</div>
Any help greatly appreciated. Thanks.
Anything that gets to the document will hide the dropdown
$(document).click(function(){
$("#dropdown").hide();
});
Clicks within the dropdown won't make it past the dropdown itself
$("#dropdown").click(function(e){
e.stopPropagation();
});
I believe adding these code will solve your problem.

How can I have only one div shown at a time?

I have this code but I'm not sure how to make it so that each time one button is clicked, it closes the other div that is already open. New to jquery!
HTML:
<p class="profile-name">Name</p><br>
<p class="profile-title">Documentation Officer</p><br>
<button id="button-g" class="bio-button">Bio</button><br>
<a class="profile-email" href="mailto:email#test.com">email#test.com</a>
<div class="toggler">
<div id="effect-g" class="profile-bio">
<p>Bio information. Bio Information</p>
</div>
</div>
JQUERY:
<script>
$(function() {
$( "#button-a" ).click(function() {
$( "#effect-a" ).slideToggle( "visible");
});
$( "#button-b" ).click(function() {
$( "#effect-b" ).slideToggle( "visible");
});
$( "#button-c" ).click(function() {
$( "#effect-c" ).slideToggle( "visible");
$("#button-b").hide();
});
$( "#button-d" ).click(function() {
$( "#effect-d" ).slideToggle( "visible");
});
$( "#button-e" ).click(function() {
$( "#effect-e" ).slideToggle( "visible");
});
$( "#button-f" ).click(function() {
$( "#effect-f" ).slideToggle( "visible");
});
$( "#button-g" ).click(function() {
$( "#effect-g" ).slideToggle( "visible");
});
});
</script>
It's rarely wise to target a zillion elements by ID (or any other unique attribute) in a uniform, repetitive structure. Give all your buttons and all your collapsible siblings the same classes, respectively, then do this (or something similar--I can't be more specific without seeing your HTML):
$('.my-button-class').click(function() {
$(this).next('.my-collapsible-div-class').slideDown()
.siblings('.my-collapsible-div-class').slideUp();
});
This assumes markup like this:
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
Update based on your HTML:
$('.bio-button').click(function () {
$(this).nextAll('.toggler:first').slideToggle()
.siblings('.toggler').slideUp();
});
Demo
http://api.jquery.com/nextall
http://api.jquery.com/first-selector
Off-topic suggestion: Use CSS margin or padding rather than line breaks to format your content. Extra markup elements for spacing is ugly and inefficient.
Give the div's a common class, and a custom data attribute with the letter of the next div to open, then combine this into a single function. Sample div:
<div id="effect-a" class="effect"></div>
Sample button
<button id="button-a" class="button" data-letter="a">Click me</button>
Single function
$(".button").click(function() {
//Slide up any open divs
$(".effect").slideUp();
var divLetter = $(this).data("letter") //a
//Concatenate selector
$("#effect-" + divLetter).slideDown();
});

A button toggle some <li> from a <ul>

I have this JSFiddle. I have a ul list and some li inside. I want pressind a button to toggle the 2 first li. I tried to put <li class="s1"> and then
$( "button" ).click(function() {
$("ul.s1").click(function() {
$(this).slideToggle(300);
return false;
});
});
<button>button</button>
<ul>
<li class="s1">1</li>
<li class="s1">1</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
</ul>
but nothing happens..
Firstly, you don't need to give the li their own click event if you want them to slide on click of the button. Secondly, the selector for the li elements is incorrect. Thirdly the jsFiddle you setup didn't include jQuery. Try this:
$("button").click(function () {
$("ul .s1").slideToggle(300);
});
Example fiddle
$( "button" ).click(function() {
$("ul .s1").slideToggle(300);
return false;
});
A space between ul and class should fix it.
And you don't need the click handler for list element.

how to figure out which list item has been dropped

I have 3 columns.
<div id="catalog">
<ul id="author">
<li>Different Author names</li>
....
</ul>
<ul id="genre">
<li>Different Genres</li>
</ul>
<ul id="publish">
<li>Different Publishers<li>
</ul>
</div>
I use jquery to drag and drop the items from these list to different list cart like this
$(function() {
$( "#catalog li" ).draggable({
appendTo: "body",
helper: function( event ) {
return $( "<li class='bit-box'>" + $(this).text() + "</li>" );
},
cursorAt: { cursor: "move", top: 5, left: 5 }
});
$( "#cart ul" ).droppable({
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( this ).find( "li:contains('" + ui.draggable.text() + "')" ).remove();
$( "<li class='bit-box'></li>" ).text(ui.draggable.text()).append("<a class='closebutton' href='#' onclick='$(this).parent().remove();'></a>").appendTo( this );
}
});
Is there any any way to figure out which list the are dropped item belongs to.
I appreciate any help.
Try using this in the drop handler:
ui.draggable.closest('ul').attr('id')
It should give you an id of the list that dropped item belongs to.
You should inspect the $(this).parent().id property. if you want the id of the parent list.

Jquery hover + position absolute = Problems in IE

I'm making a drop down menu and it works great in all modern browser but im not sure, it fails in IE, when i try to select the sub-elements of the submenu, it disappears.
This is the page: http://XXX/
and this is the JS code
$("nav li").hover(function(){
$(".subnavi-wrapper", $(this)).show();
}, function(){
$(".subnavi-wrapper", $(this)).hide();
});
EDIT: Apparently it's the margins on top of the dropdown which seem to activate the "mouseout" in IE! Aparently jQuery detects badly the area of the items with position absolute! :(
It's all because block "subnavi-wrapper" in Li element. You must remove DIV and try do it only by using Ul element. I made something like it here: http://www.muzykakoncerty.pl
here, something like this:
$('#menu > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
and my menu HTML code is:
<div id="menu">
<ul>
<li>
wstęp
</li>
<li>
<ul>
<li>Big Band</li>
<li>Arti Sound Concert</li>
<li>Leszczyńska Kapela Barokowa</li>
</ul>
zespoły
</li>
<li>
<ul>
<li>Dancing Sisters</li>
</ul>
taniec
</li>
<li>
o mnie
</li>
<li>
kontakt
</li>
</ul>
</div>
EDIT:
so try it:
$('nav > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
What you have uses the multiple selector selector will show/hide both the nav li and the .subnavi-wrapper. I think you only need to toggle the .subnavi-wrapper
$("nav li").hover(function(){
$(".subnavi-wrapper").show();
}, function(){
$(".subnavi-wrapper").hide();
});
If you only want to show the .subnavi-wrapper under the current li:
$("nav li").hover(function(){
$(this).find(".subnavi-wrapper").show();
}, function(){
$(this).find(".subnavi-wrapper").hide();
});
// show
$("nav li").live('mouseover',function(){
$(".subnavi-wrapper").show();
});
// hide
$("nav li").live('mouseout',function(){
$(".subnavi-wrapper").hide();
});

Categories

Resources