nested list css problems

nested list css problems - javascript

I am having trouble nesting a list in the following. The nested list isn't appearing on the page. I assume its something to do with my JS hiding it. Can anyone see what the problem may be - it's driving me mad!
<ul class="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>
My JS:
<script>
$(document).ready(function () {
$('#question > li > a').click(function(){
if (!$(this).hasClass('active')){
$('#question li ul').slideUp();
$(this).next().slideToggle();
$('#question li a').removeClass('active');
$(this).addClass('active');
}
else{
$('#question li ul').slideUp();
$('#question li a').removeClass('active');
}
});
});
</script>

Here:
http://jsfiddle.net/eAJjs/
$('#question > li > a').click(function () {
if (!$(this).hasClass('active')) {
$('#question>li>ul').slideUp();
$(this).next().slideToggle();
$('#question>li>a').removeClass('active');
$(this).addClass('active');
} else {
$('#question>li>ul').slideUp();
$('#question>li>a').removeClass('active');
}
});
<ul id="question">
<li>QUESTION goes here
<ul>
<li>ANSWER goes here>
</li>
</ul>
</li>
<li>QUESTION 2 goes here
<ul>
<li><a href="#">ANSWER 2 goes here>
<li>
<ul>
<li>nested list item 1</li>
<li>nested list item 2</li>
<li>nested list item 3</li>
</ul>
</li></a>
</li>
</ul>
</li>
</ul>

Related

Children access for a multiple li in ul

I want to change the class of ul inside the ul.navigator trying to change it only on the one li I click. But this doesn't change anything, doesn't work. some help?
$('.navigator').children('li ul').each(function() {
if ($(this).hasClass('opened')) {
$(this).addClass('closed');
$(this).removeClass('opened');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
.opened {
color: green
}
.closed {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>

You need to use .find() instead of .children()
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
$('.navigator').find('li ul')
OR, Descendant selector
$('.navigator li ul')
$('.navigator').find('li ul').click(function() {
if ($(this).hasClass('opened')) {
$(this).addClass('closed');
$(this).removeClass('opened');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
.opened {
color: green
}
.closed {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>

Try it like this:
$('.navigator > li').on('click', function() {
$('.navigator').children('li ul').each(function() {
if ($(this).hasClass('opened')) {
$(this).addClass('closed');
$(this).removeClass('opened');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
});
This way, when an li directly under .navigator is clicked, your code will fire.

using toggle Function
$('.navigator li').click(function(){
$(this).children('ul').toggleClass('closed');
});
Live Demo Here
snippet
$('.navigator li').click(function(){
$(this).children('ul').toggleClass('closed');
});
.closed
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>

Better use with toggleClass
$('.navigator li ul').click(function(){
$(this).toggleClass('closed');
});
or
for your way to solve the problem like below:
use childern apply with same line $('.navigator li ul').
Apply removeclass before addClass.
And Don't forget to add jquery library
Snippet
$('.navigator li ul').click(function(){
if($(this).hasClass('opened')){
$(this).removeClass('opened');
$(this).addClass('closed');
} else {
$(this).addClass('opened');
$(this).removeClass('closed');
}
});
.opened{color:green}
.closed{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
<li class="elem1">
<span>Element 1</span>
<ul class="opened">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li class="elem2">
<span>Element 2 </span>
</li>
<li class="elem3">
<span>Element 3 </span>
</li>
</ul>

Display parent UL and for the root parent both UL and LI node

<ul id="ul_Book1">
<li id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
<li id= "li_Chap1"> Chapter 1</li>
<ul>
<li id="li_Sect11" > Section 1.1 </li>
<li id="li_Sect12" > Section 1.2 </li>
<li id="li_Sect13" > Section 1.3 </li>
</ul>
</ul>
<ul id="ul_Chap2">
<LI id= "li_Chap2"> Chapter 2</LI>
<ul>
<li id="li_Sect21" > Section 2.1 </li>
<li id="li_Sect22" > Section 2.2 </li>
<li id="li_Sect23" > Section 2.3 </li>
</ul>
</ul>
<ul id="ul_Chap3">
<li id= "li_Chap3"> Chapter 3</li>
<ul>
<li id="li_Sect31" > Section 3.1 </li>
<li id="li_Sect32" > Section 3.2 </li>
<li id="li_Sect33" > Section 3.3 </li>
</ul>
</ul>
function menuDisplayPath(li_id) {
var idVal = li_id;
var $obj = $('li').filter(function () { return $(this).attr('id') == idVal; }).parents();
$($obj.get().reverse()).each(function () {
if ($(this).is("li")) {
$(this).find('li').each(function () {
$(this).show();
});
$(this).find('Ul').each(function () {
$(this).show();
});
}
});
}
When a LI node is selected , say "Section 3.2" , I would like to expand/show only "Book1-- Chapter3 -- Section 3.2" and rest of the UL nodes under Book1 should not expand.
But my function menuDisplayPath(li_id) is expanding all the UL under Book1 and also display all LI's. What am I missing in the function.

Assuming all is expanded on load.
First, I corrected many missing double-quotes and extra spaces...
So here is your HTML:
<input type="reset" id="reset" value="Expand all">
<ul id="ul_Book1">
<li id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
<li id="li_Chap1"> Chapter 1</li>
<ul>
<li id="li_Sect11"> Section 1.1 </li>
<li id="li_Sect12"> Section 1.2 </li>
<li id="li_Sect13"> Section 1.3 </li>
</ul>
</ul>
<ul id="ul_Chap2">
<li id="li_Chap2"> Chapter 2</li>
<ul>
<li id="li_Sect21"> Section 2.1 </li>
<li id="li_Sect22"> Section 2.2 </li>
<li id="li_Sect23"> Section 2.3 </li>
</ul>
</ul>
<ul id="ul_Chap3">
<li id="li_Chap3"> Chapter 3</li>
<ul>
<li id="li_Sect31"> Section 3.1 </li>
<li id="li_Sect32"> Section 3.2 </li>
<li id="li_Sect33"> Section 3.3 </li>
</ul>
</ul>
</ul>
And here is the way to hide the other chapters on click of a li with a section id:
$(document).ready(function(){
$("#ul_Book1").on("click","ul ul li", function(){
$(this).parent().parent().siblings("ul").each(function(){
$(this).hide(); // Hides all other chapter
});
});
$("#reset").on("click",function(){
$("#ul_Book1").children("ul").each(function(){
$(this).show();
});
});
});
Fiddle
Now... Can't tell you how to display the <section> since I didn't see the relevant HTML.

The following worked for me:
function open($li) {
$('.content').hide();
$li.children().show();
if ($li.hasClass('section')) $li.parent().parent().children().show();
}
// test driver
$(document).ready(function() {
$('li').click(function (e) { open($(this)); e.stopPropagation(); });
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="book">
<li class="chapter">Chapter One
<ul class="chapter content">
<li class="section">Section One<br><i class="content">1.1 contents</i></li>
<li class="section">Section Two<br><i class="content">1.2 contents</i></li>
</ul>
</li>
<li class="chapter">Chapter Two
<ul class="chapter content">
<li class="section">Section One<br><i class="content">2.1 contents</i></li>
<li class="section">Section Two<br><i class="content">2.2 contents</i></li>
</ul>
</li>
</ul>
Basically you put the section element you want to be open inside the open($li) function.
You should also only put <li> elements inside <ul> elements.
I hope this is what you wanted.

jquery onclick parent remove child action

Actually I'm really very sorry about my question, I'm not sure how to make attention or ask question about this kind of problem.
Please see my code 1st.
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
The jquery code is:
<script>$('#product').click(function () {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists li').click(function () {
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
});
$('#lists li ul li').click(function () {
var item = $(this).data('item');
$('.code3').empty().append(item);
});</script>
You may directly view this at http://codepen.io/alshedupur/pen/YqKGqV
Everything is work fine, but my problem is, when I trigger parent list item like: Product 1 / Product 2 / Product 3
In result I want to empty .code3 span
I try to use $('.code3').empty(); on 2nd action but if I use this, then 3rd action I mean sub list click function not work.
Please see my screenshot for clearly understand what I want:

You need to empty .code3 as well.
$('#product').click(function() {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists > li').click(function(e) {
e.stopPropagation();
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty();
});
$('#lists li ul li').click(function(e) {
e.stopPropagation();
var item = $(this).data('item');
var dmodel = $(this).parents("li").data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty().append(item);
});
#product:hover,
li:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>

removing html tags but keep the inner html

I have a nav menu which have a mega menu.It has several markup to make it a mega menu.But i want to remove some of the markups when in small viewport.
So my markups are
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>
what i want
<ul class="megamenu-wrapper">
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
i have two mega-menu-wrapper
What i have tried
var megaContents = $('.megamenu-wrapper li ul').contents();
$('.megamenu-wrapper li ul').replaceWith( megaContents );
It makes a same list in two each mega menu and in each megamenu there is about 5 times repetation of each elements.
Anyone please help.

Use
//Fimd child ul li and append it to main ul
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper');
//Remove li having ul
$('.megamenu-wrapper > li:has(ul)').remove();;
$(document).ready(function() {
$('.megamenu-wrapper > li > ul > li').appendTo('.megamenu-wrapper'); +
$('.megamenu-wrapper > li:has(ul)').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home
</li>
<li>Abort
</li>
<li>Contact
</li>
</ul>
</li>
<li>
<ul>
<li>gang
</li>
<li>menu
</li>
<li>food
</li>
</ul>
</li>
</ul>
use .each() if you have multiple menus
$('.megamenu-wrapper') each(function () {
$(this).find('> li > ul > li').appendTo(this);
$(this).find(' > li:has(ul)').remove();
});
DEMO

With your current markup, you can use append() which will take the children li with anchors and append them as direct children of .megamenu-wrapper
Then, use remove() to remove the former parent li elements which now contain empty ul children
$('.megamenu-wrapper').append($('li:has(a)'));
$('.megamenu-wrapper').children('li:has(ul)').remove();
Update
For multiple menus, you can use the snippet above, but wrap it in an each() call
$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));
$(this).children('li:has(ul)').remove();
});
$('.megamenu-wrapper').each(function(){
$(this).append($(this).find('li:has(a)'));
$(this).children('li:has(ul)').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>
<ul class="megamenu-wrapper">
<li>
<ul>
<li>Home</li>
<li>Abort</li>
<li>Contact</li>
</ul>
</li>
<li>
<ul>
<li>gang</li>
<li>menu</li>
<li>food</li>
</ul>
</li>
</ul>

Multiple Nav update Jquery

Created a header and footer nav. The header nav contains 1 UL and the footer nav contains 5 UL. I want the li:first child of each UL in the footer nav to match up with the header nav. The footer nav has the same main li as the header nav but contain sub li within them Can someone please help me out?
I created a jsFiddle of my issue:
http://jsfiddle.net/WkZuv/41/
$(".Nav > li").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
$(".footer > li:first-child").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(".Nav > li").eq($(this).index()).addClass("menuClicked");
$(".footer > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
.menuHover{
background-color:#666;
color:#fff;
}
.menuClicked{
background-color:yellow;
color:#666;
}
.footerTitle{
font-weight: bold;
color:black;
}
<h1>Header NAV</h1>
<ul class="Nav">
<li class ="menuClicked"> List 1 </li>
<li>List 2 </li>
<li> List 3 </li>
<li> List 4 </li>
<li> List 5</li>
</ul>
<hr />
<h1>FOOTER NAV</h1>
<ul class="footer">
<li class ="footerTitle"> List 1 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 2 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 3 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 4 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 5 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>

I think I understand what you are looking for. Try something like this:
$(".Nav > li").live({
mouseover:function(){
$(this).addClass("menuHover");
$(".footer > li:first-child").eq($(this).index()).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
$(".footer > li:first-child").eq($(this).index()).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
$(".footer > li:first-child").removeClass("menuClicked").eq($(this).index()).addClass("menuClicked");
}
});
$(".footer > li:first-child").live({
mouseover:function(){
$(this).addClass("menuHover");
$(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
$(".Nav>li").eq($(".footer").index($(this).parent("ul"))).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(".footer > li:first-child").removeClass("menuClicked");
$(this).addClass("menuClicked");
$(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuClicked");
}
});
DEMO:
http://jsfiddle.net/dirtyd77/WkZuv/65/

There is an issue with the following statement.
$(".Nav > li").eq($(this).index()).addClass("menuClicked");
$(this).index() is always returning zero. Try adjusting your css selector to match the set of ul.footer elements to get the correct index. You will have to make some other modifications though.

Develop Reference

JavaScript is the programming language of the Web.

nested list css problems - javascript

Related

Children access for a multiple li in ul

Display parent UL and for the root parent both UL and LI node

jquery onclick parent remove child action

removing html tags but keep the inner html

Multiple Nav update Jquery

Categories

Resources