How to add active class using JQuery? - javascript

I set the active class by onclick function.
when I click A (parent li) the li tags are active.
But when I click siblings li i.e A11 are active while parent li tags are inactive, the following problems ocur:
all the siblings and parent li tags are hidden
I want to display siblings li tags along with parent li tags
My code:
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>
My javascript:
<script type="text/javascript">
$( document ).ready(function() {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
</script>

As you can see in the snippet below, the bunch of code you provided is not enough for us to answer you. The li elements are not even clickable, for us to see the behaviour you describe.
$(document).ready(function () {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>

Related

How to prevent all parents from toggling when clicking on child link jquery?

So I have something like this:
And some ultra simple jQuery that is toggling the child links when I click the parents ("Spec Sheet", "Instructions" etc) although when I click on one, they all open. Here is the code (is there a simple way to only open one parent per click)?:
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("ul");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
$(this).closest("ul"); is targeting the wrong element, this targets the first parent ul encountered going up the DOM tree from the clicked a tag
In the below $(this).closest("li").find("ul"); will target the first parent li tag encountered going up the DOM tree from the clicked a tag, then find the ul tag inside that li tag
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li").find("ul");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sticky-sidebar">
<ul class="dropdown-menu">
<li>
Where to Buy
</li>
<li>
<ul id="dropdown-download-links" data-sticky="sticky-aside" class="fast-links dropdown">
<div data-domain="http://wacdev.waclighting.com" style="display:none;"></div>
<div data-zspectempid="" style="display:none;">0</div>
<div data-ppid="" style="display:none;">333</div>
<div data-spec-sheet-url="" style="display:none;">/storage/SPECSHEET_PDF/R3CRDT_SPSHT.pdf</div>
<li>SPEC SHEET
<ul id="spec-sheet-option" style="display: none;">
<li><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Oculux Architecture</li>
<li>Dim-to-Warm!</li>
</ul>
</li>
<li>INSTRUCTIONS
<ul id="spec-sheet-option" style="display: none;">
<li>Oculux Architecture</li>
<li>Dim-to-Warm!</li>
</ul>
</li>
<li>IES FILES
<ul style="display: none;">
<li>Some value</li>
<li>Some other value</li>
</ul>
</li>
<li>DIMMING REPORT
<ul style="display: none;">
<li>Some value</li>
<li>Some other value</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Make sub nav slidedown and slideup toggle

Here's what I'm trying to do:
Create a navigation with a sub-nav or child page.
When the user clicks on about, I want the about to toggle the Bob li.
It should slide down and slide up when clicked on and off of about.
$(document).ready(function() {
$("#grab").click(function() {
$(".sub-nav").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li id="#grab">About
<ul class="sub-nav">
<li>Bob</li>
</ul>
</li>
<li>Contact</li>
<li>Faqs</li>
</ul>
Your HTML is wrong you have a hashtag before grab id="#grab" it should be id="grab" by default the li contain "Bob" will be show to resolve this issue, add display:none; to the ul either through a class or inline
$(document).ready(function() {
$("#grab").click(function() {
$(".sub-nav").stop().slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li id="grab">About
<ul style="display:none" class="sub-nav">
<li >Bob</li>
</ul>
</li>
<li>Contact</li>
<li>Faqs</li>
</ul>
The # is used to reference id, in your tag you're seting the id as #grab, and in your jquery you're setting the .click() event to the class grab.
Then you'll need to change your <li> id to grab:
<li id="grab">
You can add display: none to your <ul>. In that way, when the page load, the sub-nav starts hidden:
You can set this on the tag:
<ul class="sub-nav" style="display: none;">
Or in your css:
.sub-nav{
display: none;
}

Function click on li element

I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/

Jquery menu ul toggle

I have this menu:
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
Each of the "#submenu" li fadeIn an ul sublist and hide the other sublists.
This are the sublist:
<ul class="sublist first_sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
<ul class="sublist second_sublist">
<li>Mini-Hamburgueses</li>
<li>Surtit Mini-Hamburgueses</li>
</ul>
<ul class="sublist third_sublist">
<li>Normal</li>
</ul>
<ul class="sublist fourth_sublist">
<li>Poltre</li>
</ul>
<ul class="sublist fifth_sublist">
<li>Porc ibèric de Gla</li>
</ul>
and this css:
.second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
display: none;
}
with this script:
$('#submenu li').click{
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});
The problem with the script is that it will get bigger if i have five sublists, cause i will have to make every click function per "#submenu" li.
Can someone help me to make it simple?
Use class instead of id for binding event so that you do not need id for binding the click event.
$('.clearfix li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});
This is the approach I would take:
Update: I forgot to mention, you could also get rid of the clearfix class.
HTML
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
<ul class="sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
<ul class="sublist">
<li>Mini-Hamburgueses</li>
<li>Surtit Mini-Hamburgueses</li>
</ul>
<ul class="sublist">
<li>Normal</li>
</ul>
<ul class="sublist">
<li>Poltre</li>
</ul>
<ul class="sublist">
<li>Porc ibèric de Gla</li>
</ul>
JavaScript
$('#submenu li').on('click',function(){
$this = $(this);
// move active class to current list item
$this.addClass('active').siblings().removeClass('active');
// make sure all the sublists are hidden,
// then determine the position of the list item
// in the ul, and select the corresponding sublist
// ex: selecting the 2nd list item in submenu would
// find the 2nd sublist and fadeIn
$('.sublist').hide().eq($this.index()).fadeIn();
});
Of course, this means the sublists would have to be in the same order as the submenu list items.
Check this fiddle
Use the HTML-5 data attributes to store the corresponding sublists in them..
Approaching this way you can use a single handler to show/hide the sublists on the page.
HTML
<ul id="submenu" class="clearfix">
<li>Vedella</li>
<li>Minis de vedella</li>
<li>Vaca</li>
<li>Poltre</li>
<li>Porc Ibèric</li>
<li>Pollastre</li>
<li>Gall d´indi</li>
<li>Bou</li>
</ul>
Javascript
$('#submenu li a').on('click',function() {
var $this = $(this);
var className = $this.data("class");
$('#submenu li a').removeClass('active');
$this.addClass('active');
$('.sublist').hide();
$('.'+ className).show();
});​
Use this if you have done your structure this way or if you change this way:
<ul id="submenu" class="clearfix">
<li>Vedella
<ul class="sublist first_sublist">
<li>Normal </li>
<li>All i Julivert</li>
<li>Formatge Roquefort</li>
<li>Ceba</li>
</ul>
</li>
</ul>
$('#submenu li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('ul',this).fadeIn();
});

How do I slide/open specific menu item using javascript / jquery on page load?

I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load?
I'm using this:
<!-- menu -->
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a>About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a>Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
<!-- menu end -->
and my javascript on click is this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
but my quest is: how do I open specific item(s) on page load? How do I open menu item 2 for example ("about"), or menu utem 3 ("projects"), etc...?
quite easy actually;
$('#menu li a:eq(1)').trigger('click'); //open "about"
$('#menu li a:eq(2)').trigger('click'); //open "projects"
hope I helped
Put an id to your a tags like
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a id="about">About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a id="projects">Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
and then pass an id of your choice to your function like
// Pay attention to pass id to function
function initMenu(id)
{
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
});
// Add following lines
if (typeof(id) != 'undefined')
{
$('#'+id).click();
}
}
$(document).ready(function() {initMenu('projects');});
Then to change you can use instead
$(document).ready(function() {initMenu('about');});

Categories