Bootstrap dropdown menu close on click inside - javascript

I have the following code:
function dosomething(id, event){
event.preventDefault();
event.stopPropagation();
// dosomething
}
<div class="btn-group">
click
<ul class="dropdown-menu options_drop pull-right">
<li>do some thing1</li>
<li>do some thing2</li>
</ul>
</div>
I use the dropdown dropdown, but when I click on one of the two Li tags, the dropdown does not automatically hide.
Please help me solve this problem,
Thanks all

Assuming you want to hide all li on each click try this:
$("ul li").click(function () {
$("li").hide("slow")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
click
<ul class="dropdown-menu options_drop pull-right">
<li>do some thing1</li>
<li>do some thing2</li>
</ul>
</div>

Related

Open dropdown on span click

I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>

Collapsible menu in jquery

I have a side collapsible panel , on clicking the arrow icon the sub contents are hidden , and once hidden on clicking the arrow the sub contents are shown.
There is a jquery code for the slide down and slide up function , is there a way by default the sub contents are hidden and onclicking the arrow the sub content are shown or hidden accordingly?
The code is as
jQuery(function($) {
$('.active span.clickable').on("click", function(e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
You need to add css if you want sub-menu by default hidden. Please follow the below code, it will done your job::
HTML
<li class="active">
Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
CSS
.collapsein{
display: none;
}
JQUERY
jQuery(function ($) {
$('.active a.clickable').on("click", function (e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
Working JSFiddle:: https://jsfiddle.net/80fpe9d9/
If you want your list to appear hidden by default it is only a simple adjustment. You would first set the css for it to display: none.
CSS
.collapsein {
display: none;
}
And also add the class panel-collapsed to your clickable span
HTML
Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
Working JSBin
Moved down arrow left for clarity.
Thanks for the answers!!!!
Had to add the css code for it to work properly
.collapsein{
display: none;
}
Use this Script code with Jquery
<script>
$(function(){
$("#accordian h3").click(function(){
$("#accordian ul ul").slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideDown();
}
});
});
</script>
call the accordian id in html like below:
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li>Sub menu1 </li>
<li>Sub menu2 </li>
<li>Sub menu3 </li>
<li>Sub menu4 </li>
</ul>
</li>
</div>
Here is the Reference and Demo

How to hide a menu when an item is clicked or hide the menu when someone clicks away

So i want to hide my bootstrap menu on the event when an item is clicked. This is my menu code
<div class="container visible-xs" id="top">
<div class="header-bottom navbar-fixed-top">
<div class="top-nav">
<span class="menu"><img src="images/pic copy.png" alt="toggle"> BESSIT4REAL</span>
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</ul>
</div>
<div class="social-icons">
<ul class="social">
<li><a href="#" ><i> </i> </a></li>
<li></i></li>
<li></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<br class="visible-xs">
</div>
and this is my javascript code
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".ul").hide();
});
});
$('')
});
</script>
Basically i need to hide the entire "<ul>" element when the <li> item is clicked,
Currently when someone click on home or about, the menu stays on the screen and does not disappear.
Use the following Jquery Code:
<script>
$(".top-nav li").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$(this).hide();
});
});
</script>
you have an error.. your ul has an ID not a class, so you should us '#' in your jquery.
And to hide your ul you can use either hide() or fadeOut(0)..
$("#ul li a").click(function() {
$("#ul").fadeOut(0);
});
or
$("#ul li a").click(function() {
$(this).fadeOut(0);
});
$(".ul").hide();
references all elements with a class of "ul" You probably want (in your code example) the id referece
$("#ul").hide();
Or if you want all the <ul> elements then give them both the same class (like "hideableUL") then you could go like:
$(".hideableUL").hide();
I did this and it helped.
$("span.menu").click(function(){
$(".top-nav #ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".top-nav #ul").hide();
});
});
$('')
});

How can I create a drop down menu with JQuery

I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.
When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.
What I want to accomplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.
HTML
<!-- original code -->
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- my code -->
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
JS
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
// rename the JS to use the id/class for my script
The JSfiddle is here https://jsfiddle.net/cRsZE/982/
You have to update the click event in your jQuery to work for clicking the menu icon. This works:
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
Edit As requested via the comments, to have the menu appear below the menu icon all you have to do is reposition the menu icon to be above the ul like so:
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
And working Fiddle
Need To update Code Like That :
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
For Documentation :https://jqueryui.com/menu/
Cleaned up code a little. Like this?
https://jsfiddle.net/cshanno/cRsZE/990/
$(document).ready(function () {
$('#menu-icon').click(function () {
$('.sub-nav').toggleClass('visible');
});
});

JavaScript hasClass ignoring element's class?

I have an Isotope filter menu and I'm using hash history so the filters are still set if a user comes back to the page. Because we are using .slideDown to expand sub-menu items, the sub-menu items are hidden when you come back to the page even though some filters within them are selected.
I'm trying to use:
if ($('#option1').hasClass('.selected')) {
$('.level-two').slideDown('fast');
}
However, since the class "selected" is being generated by the jQuery filter (Isotope), it's being ignored.
Fiddle: http://jsfiddle.net/RevConcept/swT84/
HTML:
<nav>
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden">any</li>
<li><a id="option1" href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a></li>
<li><a id="option2" href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a></li>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden">any</li>
<li>illuminated</li>
<li>non-illuminated</li>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden">any</li>
<li>wall</li>
<li>ground</li>
</ul>
</div>
</div><!--end options-->
</nav>
CSS:
header nav ul.level-two, header nav ul.level-three {
display:none;
}
JavaScript:
$(function(){
$('.level-one').hide().fadeIn('fast');
});
$(".trigger-two").one('click', function(){
$(".level-two").slideDown('fast');
});
$(".trigger-three").one('click', function(){
$(".level-three").slideDown('fast');
});
if ($('#option1').is('selected')) {
$('.level-two').slideDown('fast');
}
I guess you are missing a '.'
if ($('#option1').is('.selected')) {
$('.level-two').slideDown('fast');
}
Rather than copy the same process of each click with a repeated function you could always programatically trigger the clicks on the .selected anchors.
$('.option-combo a.selected').trigger('click');
A fiddle: http://jsfiddle.net/jgkwd/

Categories

Resources