I have added the Prototype library to my site, then add the following code. but when i click the span, the ul content is not hidden. the link href still work.
Event.observe(window, 'load', function() {
Event.observe('.block-category li.parent span', 'click', function(e){
$('.block-category li.parent ul').toggle();
e.preventDefault();
});
});
html:
<div class="block block-category">
<li class="level-top parent">
<span>text one</span>
<ul> //the 1 ul
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top"><span>....</span></li>
<li class="level-top parent">
<span>text two</span>
<ul> //the 2 ul
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top parent">
<span>text three</span>
<ul>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
</div>
thank you.
ps: when click text one, the the 1 ul toggle. when click *text two*the 2 ul toggle, ...
You are using CSS selectors as arguments to Prototype's $() and Event.observe() functions. Neither of these functions accepts a selector. They both expect element IDs instead.
You can use $$() instead of $() and give it a selector. Note that this returns an array of extended elements and not just a single one.
http://api.prototypejs.org/dom/Event/observe/
http://api.prototypejs.org/dom/dollar/
http://api.prototypejs.org/dom/dollar-dollar/
You should try $$ to select multiple elements and then call observe for each one of them:
Event.observe(window, 'load', function() {
$$('.block-category li.parent > a span').each(function (element) {
element.observe('click', function (e) {
e.element().up().next('ul').toggle();
e.preventDefault();
});
});
});
Related
I have list item
<ul class="menu">
<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>
</ul>
<div class="append_li"></div>
So suppose when I click on <li>LIST 1</li> remaining li with tags should get appended in div tag but not clicked li, so how to do this using jQuery
You can use jQuery .clone() for this purpose:
$(document).ready(function(){
$('li').click(function(){
//$('.append_li').html('');
$('.append_li').html($('li').not($(this)).clone());
});
});
Working snippet:
$(document).ready(function(){
$('li').click(function(){
//$('.append_li').html('');
$('.append_li').html($('li').not($(this)).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>
</ul>
<div class="append_li"></div>
Note: If you want to replace data inside <div> instead of append, then add below line in your code before .clone() line
$('.append_li').html('');
Important:- What every-one talks about invalid HTML, You can overcome to that problem by doing below code:
$(document).ready(function(){
$('li').click(function(){
$('.append_li').html('');
$('.append_li').html($("ul.menu").clone().find('li:eq('+ $(this).index() +')').remove().end());
})
})
Output: http://jsfiddle.net/0mz9s8ng/
You can use like this:
$('.menu li').click(function (){
$(this).siblings('li').clone().appendTo('.append_li')
});
OR Like this
$('.menu li').click(function (){
$(this).siblings('li').appendTo('.append_li')
});
I have HTML Structure like
<ul>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li><a></a></li>
</ul>
</li>
</ul>
</li>
</ul>
I want to add 'active' class for relevant 'a' Element when corresponding li clicked.
$('#a').on('click', function(){
$('a', this).addClass('active');
});
<ul>
<li id="a"><a></a>
<ul>
<li id="b"><a></a>
<ul>
<li id="c"><a></a>
<ul>
<li id="d"><a></a></li>
</ul>
</li>
</ul>
</li>
</ul>
Use children() method, since you only want to select the direct child
$('li').click(function(){
$(this).children('a').addClass('active')
})
or use > to select direct child
$('li').click(function(){
$('>a', this).addClass('active')
})
A delegate click handler would most likely solve your problem best.
$('ul.master').on('click', 'li', function (evt) {
evt.stopPropagation();
// I added this line to remove active class from all other a tags
$(this).parents('ul.master').find('a').removeClass('active');
$(this).children('a').addClass('active');
});
See this jsfiddle
You could work on the <a> tag directly to capture the click for changing the active class. If you need to work directly with the <li> You can attach another handler.
$('a').click(function(evt){
$(this).addClass('active');
});
$('li').click(clickHandler);
You mean something like this?
$('li').on('click', function(){
$('a', this).addClass('active');
});
just target the li a directly:
$('li a').on('click', function(){
$(this).addClass('active')
});
$('li').on('click', function(){
$(this).closest('a').addClass('active');
});
Get first child using :first (if you have only one anchor per li) the use addclass method to assign class
I fixed your HTML:
<ul>
<li>
<a>A</a>
<ul>
<li>
<a>B</a>
<ul>
<li>
<a>C</a>
<ul>
<li>
<a>D</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
jQuery + JS code:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$('a').click(function(){
$(this).parent('li').addClass('active')
})</script>
$(document).on('click', 'a', function(){
if($(this).parent('li').length) {
$(this).parent('li').addClass('active');
}
});
$(document).on('click', '#ul li:not(.info)', function(){
alert();
});
My html is like this
<ul id="ul">
<li></li>
<li><a href="#" class="info"></li>
</ul>
why it still trigger when I click on .info?
Because your HTML defines .info class on the <a> descendant instead of the <li> itself, while your selector denotes :not(.info) which means the <li> is not having the .info class.
Try this instead:
$(document).on('click', '#ul li:not(:has(.info))', function(){
alert();
});
Alternatively, you can simply move your .info class to the <li> itself:
<li class="info"><a href="#"></li>
See jQuery's has and Fiddle
can you make it this and try
$(document).on('click', '#ul li a:not(.info)', function(){
alert();
});
#ul li:not(.info) looks for a class in li that is not info
#ul li a:not(.info) will give you the right result
JSFiddle
I have the following code structure:
<ul class='menu'>
<li>
Main Menu
<ul class='hide'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>
Main2
<ul class='hide'>
<li>Sub1</li>
</ul>
</li>
</ul>
Is there a way for me to have a jQuery click event on Main Menu and Main2 in a generic way that will remove the class 'hide' of the correct children each time?
Here is another way, which uses event delegation and only runs when the li element and not its children was clicked:
$('ul.menu').on('click', 'ul.menu > li', function(e) {
if(e.target === this) {
$(this).children('ul').toggleClass('hide');
}
});
DEMO
$("ul.menu > li").on("click", function () {
$(this).children("ul").removeClass("hide");
});
Example: http://jsfiddle.net/dpkBL/
Dont always do what the crowd tells you, at least think about it for a while!
I bet people will recommend you to use a selector such as ul.menu > li, but please remember that this will not only trigger a click event when you click on the text "Main Menu", but also when you click on any of the other content inside the matching li.
If you'd like to implement a show/hide toggle you are far better off wrapping the text "Main Menu" inside it's on element, and then use something as the below to alter what you may want to alter.
$(<main menu text selector>).siblings (<siblings selector>);
Still want/have to follow the crowd?
If this is the case I'd recommend you to at least do it with a little twist to prevent what I previously described.
(edit: revised version after reading the jquery documentation for elements)
$('ul.menu > li').click (function(e){
if (e.target === this) {
$(this).children ('.hide').removeClass ('hide');
}
});
$("ul.menu > li").click (function () {
$(this).find ('.hide').removeClass ('hide');
});
$("ul.menu > li > *").click (function () {
return false; // prevent event from bubbling up
});
Sample implementation of recommended version
The below will bind a click-event-listener to .menu-toggle, when the event is fired the siblings (ie. the tags who are in the same scope as the clicked .menu-toggle) matching .hide will have their class="hide" removed.
Javascript
$(".menu-toggle").click (function () {
$(this).siblings ('.hide').removeClass ('hide');
});
HTML
<ul class='menu'>
<li>
<span class="menu-toggle">Main Menu</span>
<ul class='hide'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>
<span class="menu-toggle">Main2</span>
<ul class='hide'>
<li>Sub1</li>
</ul>
</li> </ul>
Take a look at the child selectors. I think that is what you want.
$('.menu > li').click(function () {
$(this).children('ul').removeClass('hidden');
});
I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)
You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)
you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element