I'm attempting to create a "filterable" list of items. The user should be able to click on a list element (the parent), which would hide all other parent elements and show the "children".
An example of the html is:
<ul class='parent_list'>
<li>Parent 1</li>
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent 2</li>
<ul class='child_list hidden'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
My jQuery code is:
$('.parent_list li').click(function(){
$(this).siblings().addClass('hidden');
$(this).children().removeClass('hidden');
});
Of course, you can probably tell by the javascript that I don't have too much experience with things like this. I've tried searching for a bunch of different examples on Google and haven't been able to get anything to work as of yet. Any tips?
Thanks!
http://jsfiddle.net/czHQE/2/
This way you won't need a .child-list class.
HTML:
<ul class='parent_list'>
<li>Parent 1
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent 2
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
Javascript:
$('.parent_list li').click(function(){
$(this).siblings().children().hide();
$(this).children().show();
});
Try this:
$('.parent_list > li').click(function(){
$('ul.child_list').hide();
$('ul.child_list', this).show();
});
And change your HTML to remove the extra </li> after "Parent1" and "Parent2":
<ul class='parent_list'>
<li>
Parent 1
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>
Parent 2
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
When the direct children of .parent_list are clicked, it'll hide all children lists except for it's own. I used the .hide() and .show() methods since they simply toggle the element's display property.
Here's the jsfiddle to play around with.
You're going to want to clean up your markup also - you've closed the <li> tags for the "Parent 1" and "Parent 2" and then tried to close them again after the nested <ul>.
<ul class='parent_list'>
<li>Parent 1
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent 2
<ul class='child_list hidden'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
Related
I create simple drop down menu using Foundation 6
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Now i want to on different event ( like other button to hide or show menu.) But in doc there is no method to do this. When I use jquery trigger on click also not working is there any solution for this ?
Attach an event handler to an element (for example a button) and give it a function like hiding the dropdown menu:
$("button").click(function(){$(".dropdown").hide()})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button>
I'm a button
</button>
To allow it to come back again, try $("button").click(function(){$(".dropdown").toggle()})
I may possible have a requirement where i have to link the parent menu to a link rather than showing sub menu. Right now i am using Slick Menu http://slicknav.com/
Logically parent menu should not be linked as it should show child menu on mobile device. while desktop version we can counter this with hover effect can show sub-menus and click on the parent menu can open link also but on small screen we can either open link or show submenu.
my question right now is that in fiddle example (http://jsfiddle.net/y1dLdd1f/1/) i am linking Parent 1 meny to google.com, but script is blocking this. How can i unblock it and when user click on it it opens the page rather than showing the sub menu if parent menu has a proper link
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>
Slick menu has a number of available options including "allowParentLinks", all you need should be,...
$(document).ready(function(){
$('#menu').slicknav({
allowParentLinks:"true"
});
});
But to show this working in JSFiddle you would need to add target="_blank" to you <a> tag.
I'm using isotope.js to make a megamenu, and have the UL's within the megamenu stack in an orderly fashion. So essentially I have the following HTML:
<ul>
<li>ABOUT
<ul>
<li>We're Great</li>
<li>We're Really Great</li>
</ul>
</li>
<li>DIVISIONS
<ul class="level-2">
<li>Category One
<ul class="level-3">
<li>Item One</li>
<li>Item Two</li>
</ul>
</li>
</ul>
<ul class="level-2">
<li>Category Two
<ul class="level-3">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</li>
</ul>
<ul >
<li>Category Three
<ul class="level-3">
<li>Item One</li>
<li>Item Two</li>
</ul>
</li>
</ul>
</li>
<li>Products
<ul>
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
</ul>
What I need, is for the LI's within the UL with the class "level-2", to stack together nicely in the megamenu, and have isotope.js applied to them.
Simple enough, except what isotope seems to do for me, is when I use the following JS:
var $container = $('ul.level-2');
$container.isotope({
itemSelector: 'li'
});
It applies isotoping to the li's even within the level-3 class of UL... which I only want it to be applied to that ONE layer of UL, so they stack friendly, but I don't want the deeper LI's to have anything happen, they should just be normal within their respective UL's.
I have position:relative on the containing UL's, and the LI's are floated left with display: block on them as well. Not sure what I might be missing!!
Hopefully this actually makes sense. Anyone able to point me in the right direction?
I'm having a problem with jQuery.
I'm doing a mobile menu using jQuery with sub menus. I need to use the same class to activate all the menus because they will be created dynamically, but when I do this, when I click on a item, all the others show their sub-item too.
To be clear, here's an example:
<ul>
<li class="OpenMenu">Menu 1
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 2
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 3
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I need each menu to show its sub-items only when is clicked, but all using the same class. I'm doing the "open" effect of the menus with jQuery.
You can achieve by below code, find() method will drill down to only its child items and find sub items
$(".OpenMenu").click(function(){
$(this).find('.sub-item').show();
});
DEMO (covers only displaying required sub menu)
To view how to hide other sub items and display only current items, use this http://jsfiddle.net/Lboyrqnc/2/
I have a table with some rows and and cells. Using jQuery UI Selectable how can I customize the selection so it's only possible to select cells following each other. It shouldn't be possible to select cells vertically across rows without selecting the cells between.
Any solutions?
Use the selected callback to add a class to the selected element; The class which you will use to tie .selectable(). You can then use the next siblings selector in combination with this, and you should be able to accomplish what you need.
To start off, you're going to want something like the following:
<ol>
<li class="ui-widget-content ui-selectee">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
Then, as you select one, which will fire the callback, you want to make the second selectable.
<ol>
<li class="ui-widget-content ui-selectee ui-selected">Item 1</li>
<li class="ui-widget-content ui-selectee">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
And so on.