When User Open One DropDown Close Other DropDowns - javascript

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>

Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle

I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );

Related

Make parent menu link toggle submenu link

I have a menu which I have working fine but I need a small change and that is I need the parent menu to toggle the submenu, currently if you click the parent menu the submenu appears but I need it so when you click the parent menu again it closes the sub menu.
You can see the menu in action here.
and this is the javascript that is for the menu:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').hide();
}
});
This is the menu html
<nav class="main">
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Replace this code:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
With the code below:
$('.dropdown-toggle').click(function() {
var $currentDropdown = $(this).next('.dropdown');
$currentDropdown.siblings('.dropdown').not($currentDropdown).removeClass('toggled');
$currentDropdown.siblings('.dropdown').not($currentDropdown).hide();
$currentDropdown.toggleClass('toggled');
$currentDropdown.toggle();
});
That should do it.
I think this is the simplier way :)
Hope you helped
$(".dropdown").css('display', 'none');
$('.dropdown-toggle').click(function(e) {
if ($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(".dropdown").hide();
$(this).next().show();
}
});
a {
display: block;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><nav class="main">
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
I think this code will be enough.
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle();
});
Codepen Example
This can be done easily with Bootstrap:
<li class="submenu">
<i class="la la-user"></i>
<span> Main menue </span>
<span class="menu-arrow"></span>
<ul style="display: none;">
<li>sub menu 1</li>
<li> sub menu 2 </li>
<li> sub menu 3 </li>
</ul>
</li>

How to toggle only header element not the list

I have this function that expands the <ul> and hides it after it is pressed.But when i press on <li> it will also close or expand. How do I make it to toggle only when the the <h4> is clicked ?
$('.category ul').hide();
$('.sub').click(function() {
$(this).find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
Thanks in advance.
Changes made
► changed $('.sub').click(function() { to $('.sub h4')
► changed $(this).find('ul') to $(this).next()
Working Demo
$('.category ul.archive_posts').hide();
$('.sub h4').click(function() {
$(this).next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>
Change the binding to the h4, then target the next ul.archive_posts for sliding.
$('.category ul').hide();
$('h4').click(function() {
$(this).next('ul.archive_posts').slideToggle();
});
See it working in this JS Fiddle: https://jsfiddle.net/rwvdf8ys/1/
Hope that helps.
The problem is $('this').find('ul').slideToggle();
'this' represents the obj that is cals the function. In this case it is h4. H4 has noe ul, so you cant find it. but you can find ul on $('.sub')
Here is ann example
$('.category ul').hide();
$('h4').click(function() {
$('.sub').find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4 id="foo"><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
js fiddle:
https://jsfiddle.net/8hvc4cfh/
You might use the siblings('ul') selector to find and close the neighbour ul. While $(".sub h4") limits the clickable elements to your h4.
$('.category ul').hide();
$('.sub h4').click(function() {
console.log('test');
$(this).siblings('ul').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>
You can try this.
$('li.sub h4').click(function() {
$(this).next().slideToggle();
});

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>
Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

Dynamic element doesn't respond on call

I have a menu and when I click a button to add a item to another item( to be a submenu) the item/parent doesn't respond to the jQuery code for the parent items.
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").click(function(event) {
event.preventDefault();
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>
Use
$("body").on('click',".test",function(event) {})
try:
$(".test").on('click',function(event) {})
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").on('click',function(event) {
event.preventDefault();
if($(this).parent().find("ul").length == 0) {
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
}
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>

click blank area go back to selected section

<li class="list ">A
<ul class="names">
<li class="list">1
</li>
<li class="list">2
</li>
</ul>
</li>
<li class="list ">B
<ul class="names selected">
<li class="list selected">1
</li>
<li class="list">2
</li>
<li class="list">3
</li>
<li class="list">4
</li>
</ul>
</li>
<li class="list ">C
<ul class="names">
<li class="list">1
</li>
<li class="list">2
</li>
<li class="list">3
</li>
<li class="list">4
</li>
</ul>
</li>
$('.list').click(function () {
var that = this;
$('.list').each(function () {
if (that == this) return true; //continue
$('.names:not(:hidden)', this).slideToggle();
});
$('ul.names', this).slideToggle();
})
ul.names{display: none;}
li.list{
width:150px;
background:#A9FF7A;
}
ul.names {
width:150px;
background:#A9FF7A;
}
ul.selected{
display: block;
}
li.selected{
background:red;
}
online Sample: http://jsfiddle.net/gyYyd/
B's submenu 1 is highlighted. If I click on menu A or C, then A or C section will be opened, but how do I click PAGE BLANK area (outside of the background color) to go back to B section (to open B section)
Thanks in advance
You can capture clicks on the document object and trigger a click on the required list item.
$(document).click(function() {
var selected = $('.selected:first');
if(!selected.closest('ul.names').is(':visible')) {
selected.closest('.list').trigger('click');
}
});
Also, make sure to return false from your current list item click handler - so that normal clicks on list items don't propagate to the above handler.
DEMO: http://jsfiddle.net/gyYyd/2/

Categories

Resources