Create dropdown-menu with javascript - javascript

This has been ask many times here, but I couldn't find a understandable solution for my code.
I want to create a mobile show/hide dropdown menu.
My code goes like:
<div>
Click this Link to collapse the subitems
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
Click this Link to collapse the subitems
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
Click this Link to collapse the subitems
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
The subitems shall be hidden. When I click the a-Tag ("Click this link...") the subitems below shall show. Please give me a solution without alternating the code itself -Is that even possible?? Only the subitems of the clicked -Link shall collapse.
Any help?


$(div > a).on('click', function() {
var child = $(this).child('ul.submenu');
if ($(child).is(':hidden')) {
$(child).show();
}
else {
$(child).hide();
}
});


Demo
Add js :
$('div a').click(function(){
$('.submenu').slideUp();
$(this).next().slideDown();
});


Working Solution: http://jsfiddle.net/avi_sagi/CfqGG/211/
Jquery:
$(document).ready(function () {
$(".collapse").parent().find(".subitem").hide();
$(".collapse").on('click', function () {
$(this).parent().find(".subitem").slideToggle();
});
});
HTML: - add containers(.list-group) to each submenu groups for parent() method to target the only list items in its group.
<div class="wrapper">
<div class="list-group">
<a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
<div class="list-group">
<a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
<div class="list-group">
<a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
</div>

Related

How to get the value from li on click from menu for dynamic routing in vuejs?

**For time being I created a component for each li. I need this to be dynamic. This takes lot of time to load. I have no idea how to do this **
<nav class="navbar navbar-expand-lg navbar-light bg-light">
....
<div class="category">
<li class="dropdown menu-large nav-item"> Categories
<ul class="dropdown-menu megamenu">
<div class="row">
<li class="col-md-3 dropdown-item">
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Boys</li>
<li class="disabled"><li><router-link to="Pajama_kurta">Pajama kurta</router-link>
<li class="disabled"><li><router-link to="Track_pants">Track pants</router-link>
<li class="disabled"><li><router-link to="Inner_Wears">Inner Wears</router-link>
<li class="divider"></li>
<li class="dropdown-header">Home Essentials</li>
<li class="disabled"><li><router-link to="Kitchen_appliances">Kitchen appliances</router-link></li>
<li class="disabled"><li><router-link to="Doormats">Doormats</router-link></li>
<li class="disabled"><li><router-link to="Bedsheets">Bedsheets</router-link></li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Girls</li>
<li class="disabled"><li><router-link to="Frocks_party_wear">Frocks party wear</router-link></li>
<li class="disabled"><li><router-link to="Cotton_frocks">Cotton frocks</router-link></li>
<li class="disabled"><li><router-link to="Summer_collections">Summer collections</router-link></li>
<li class="disabled"><li><router-link to="Inner_wear">Inner wear</router-link></li>
</ul>
</li>
</div>
</ul>
</li>
</div>
.......
</nav>

I was actually working on something similar (I think) today.
If you don't have one already, wrap the li elements in a parent div and add a click listener to it:
<div #click="handleClicks($event)">
<li></li>
<li></li>
<li></li>
...
</div>
Now, in methods, add a handleClicks() function:
methods: {
handleClicks(click) {
if (click.target.tagName == "LI") { //Check if clicked element is a <li>
let value = click.target.value //Get li's value
router.push('name of view you want to navigate to') //Navigate to different page. Also note that the router must be imported to use it.
}
}
}
Let me know if you have any other questions

How to override hover event to click event for CSS dropdown menu

I am attempting to create a pure CSS multi-level dropdown menu. I got it to work for hovering. However, I only want it to hover in the submenu, but the main menu item to be clickable to expand the menu. I tried to add jquery to override the hovering to clickable action, but it's not working. What am I doing wrong?
<nav class="nav">
Home
<li class="menu-item subItem">Menu1<b class="down-arrow"></b>
<ul class="submenu">
<li class="menu-item">Menu Item 1</li>
<li class="menu-item subItem">Submenu <b class="right-arrow"></b></span>
<ul class="submenu">
<li class="menu-item">Sub1</li>
<li class="menu-item">Sub2</li>
<li class="menu-item subItem">3rd Level <b class="right-arrow"></b></span>
<ul class="submenu">
<li class="menu-item">Level1</li>
<li class="menu-item">Level2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<script>
$(function() {
$('.menu-item').on('click',function(e) {
e.preventDefault();
$('.submenu').show();
});
});
</script>

how to hide child elements child elements in jQuery

I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});

Slide down in each list

I need ul.list-group-subshould display none on first glance and when I click on "Click" (.dd), only one "list-group-sub" should display block from current li while "list-group-sub" should display none from other li and vice versa, only one is one "list-group-sub" open at a time
Fiddle Demo :
https://fiddle.jshell.net/alpeshlahad/zv3vpzew/3/
$(".list-group-item .dd").click(function() {
$("ul.list-group-sub").slideToggle();
});
ul.list-group-sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
<li class="list-group-item">
List 1
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
<li class="list-group-item">
List 2
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
</ul>

The issue is because your ul.list-group-sub selector is calling slideToggle() on all elements. You instead need to traverse the DOM to find the one related to the clicked .dd element. To do that you can use closest() to get the parent li, then find() to get the element you need.
To only display one menu at at time you also need to call slideUp() on them whilst toggling the target one. Try this:
$(".list-group-item .dd").click(function(e) {
e.preventDefault();
var $target = $(this).closest('li').find("ul.list-group-sub").slideToggle();
$('ul.list-group-sub').not($target).slideUp();
});
ul.list-group-sub { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
<li class="list-group-item">
List 1
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
<li class="list-group-item">
List 2
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
</ul>
Also note that I removed the use of javascript; in the href attribute of your a elements. You can instead call preventDefault() on the event to stop the default behaviour. This method has the benefit of de-coupling the JS logic from the HTML.

$("ul.list-group-sub").slideToggle() targets all sub-items. Use this:
$(this).closest('.list-group-item').find('.list-group-sub').slideToggle();
to target the corresponding list sub-items.
See demo below and updated fiddle here:
$(".list-group-item .dd").click(function() {
$(this).closest('.list-group-item').find('.list-group-sub').slideToggle();
});
ul.list-group-sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
<li class="list-group-item">
List 1
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
<li class="list-group-item">
List 2
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
</ul>

how to automatically show/hide elements with bootstrap nav list

I have a nav list with bootstrap for a mobile site and i can collapse and expand sections if i click the icon twice but when i click on a button the correct section collapses but when i click on a second button both sections stay open. I want the first one to close when i click on the second button.
Here is an example http://jsfiddle.net/MgcDU/2219/ .
<div class="navbar navbar-fixed-top visible-phone" style="margin-bottom: 0px;">
<div class="navbar-inner">
<div >
<ul class="nav ">
<li class="">
<i class="icon-filter"></i>
</li>
<li class="">
<i class="icon-plus"></i>
</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-filter collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Filter By</li>
<li class="">Filter1</li>
<li class="">Filter2</li>
<li class="">Filter3</li>
<li class="">Filter4</li>
<li class="">Filter5</li>
<li class="">Filter6</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-post collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Post something</li>
<li class="">Post1</li>
<li class="">Post2</li>
<li class="">Post3</li>
<li class="">Post4</li>
<li class="">Post5</li>
</ul>
</div>
Thanks.

You have to do some manual work I think to achieve that behaviour.
$("a[data-target='.nav-collapse-post']").click(function () {
$(".nav-collapse-filter").collapse("hide");
$(".nav-collapse-post").collapse('toggle');
});
$("a[data-target='.nav-collapse-filter']").click(function () {
$(".nav-collapse-post").collapse('hide');
$(".nav-collapse-filter").collapse("toggle");
});
And also remove the class collapse from nav-collapse-post and nav-collapse-filter if you don't want a strange behaviour on the first click.
Result: http://jsfiddle.net/ngHnh/

Categories