how to automatically show/hide elements with bootstrap nav list - javascript

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/

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 target sub-nav and toggle only one at a time

How can I toggle the secondary navigation links after clicking the "HEADER" button (under the "this should toggle the ul links"), and only one at a time. When the user clicks the button, it should close any other subnav links at its level, only allowing one to be open at a time. It should also be able to close, without triggering the other to open.
<div class="inner">
<button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
<div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
<div class="column">
<ul class="list-unstyled">
<li class="list-header mobile">link</li>
<li class="list-header desktop">head</li>
<li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
<button class="no-style">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</div>
<div class="column">
<ul class="list-unstyled">
<li class="list-header desktop">Link</li>
<li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
<button class="no-style">This should toggle the ul links</button>
</li>
<ul class="inner collapse" id="data-inner-0-0">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</ul>
</ul>
</div>
</div>
</div>
jQuery
$('.list-header').next('div').toggle();
$('.list-header').click(function() {
$('.list-header').next('div').slideUp();
$(this).next('div').toggle();
return false;
});
$('.mobile').next('div').toggle();
$('.mobile').click(function() {
$('.mobile').next('div').slideUp();
$(this).next('div').toggle();
return false;
});
JSFIDDLE: https://jsfiddle.net/jdkwcpva/
This code solves your issue:
$('.mobile').next('ul').toggle(); // <-- .next('ul') instead of .next('div')
$('.mobile').click(function() {
$('.mobile').next('ul').slideUp(); // <-- same
$(this).next('ul').toggle(); // <-- same
return false;
});
DEMO

Mobile Navigation closes after clicking on sub navigation item

I have already tried to do research to fix this problem but no fixes were working! I am using a Bootstrap 3 navigation for my site and it works great on desktop. However, in the mobile menu, I click on an item, expecting the sub nav to appear, and the whole menu closes instead - after first flashing the text of the sub nav for a millisecond. How can I fix this??
Thanks
Edit: here is my navbar setup
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="http://totango2015.staging.wpengine.com/">
<img src="http://totango2015.staging.wpengine.com/wp-content/themes/totango/assets/img/global/totango_logo.png" class="top-logo" />
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul id="menu-primary-navigation" class="nav navbar-nav"><li class="menu-product">product</li>
<li class="menu-customers">customers</li>
<li class="dropdown menu-resources"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-customer-success-resources">customer success resources</li>
<li class="menu-events-webinars">events & webinars</li>
<li class="menu-totango-support">totango support</li>
</ul>
</li>
<li class="menu-blog">blog</li>
<li class="dropdown menu-company"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">company <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-about-us">about us</li>
<li class="menu-news">news</li>
<li class="menu-careers">careers</li>
<li class="menu-contact-us">contact us</li>
</ul>
</li>
<li class="menu-login">login</li>
</ul> </div>
<!-- /.navbar-collapse -->
<hr class="nav-rule">
</div>
<!-- /.container -->
</nav>

Create dropdown-menu with 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>

Twitter Bootstrap Broader Dropdown Menu with 2 or more Div

I want to design menu like below in picture :-
But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/
Code Below :-
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
<div class="dropdown-menu">
<div class="container">
<div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Is above Menu Possible with Bootstrap ?
Thanks
Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.
.dropdown-menu-tworows .span6 {
width: 49%;
display: inline-block;
}
Is this what you wanted?

Categories