Prevent Expand/Collapse from nested Links - javascript

I have a web page that uses Bootstrap. In this page, I am using the Collapse component to toggle visibility of some elements. In each collapse component, I have some links and buttons. If a user clicks one of these links or buttons, I do NOT want the related content to expand collapse.
I have a Fiddle here, which contains the following:
<div class="container">
<div class="row" data-toggle="collapse" data-target="#parent1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
</div>
Somehow the event seems to be going up the chain even though I'm returning false in the event handlers. I'm not sure how to remedy this. Any help is appreciated it.


You just need to move "collapsing attributs" to the h2 rather than the div container that include you links, like that:
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2 data-toggle="collapse" data-target="#parent1">Parent 1</h2>
</div>
<div class="col-xs-8">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
</div>


You must remove the toggle attributes of each row and start the effect manually with JavaScript, then prevent the <button> and <a> elements from taking any action.
All your code would look like this
HTML
<div class="container">
<div class="row row1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
JavaScript
$(document).ready(function(e) {
//on click in row1 class init toggle effect
$(".row1").on("click", function(){
//collapse content
$("#parent1").collapse('toggle');
});
$("div.row2").click(function(){
$("#parent2").collapse('toggle');
});
$("div.row3").click(function(){
$("#parent3").collapse('toggle');
});
//on click in button or a return false
$("button, a").on("click", function(){
return false;
});
});

Related

Filter different divs with list

I have some divs with different content in it. On the left side i have got a list with differenct categories. With a click on a categorie I want to load the div of this category.
At the beginning I want to have the main category loaded. So there is no option to show all elements.
var $eBayElements = $('.row > div.col-lg-9');
$('.filter_link').click(function(e){
e.preventDefault();
var filterVal = $(this).data('filter');
$eBayElements.hide().filter(filterVal).show();
});;
<section class="area1">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center pb-10">
<h3 class="title">Aktuelle Angebote</h3>
<p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="offer-menu text-center mt-50">
<ul>
<li class="filter_link" data-filter=".main" class="active">Alles</li>
<li class="filter_link" data-filter=".handys">Handys</li>
<li class="filter_link" data-filter=".spiele">Videospiele</li>
<li class="filter_link" data-filter=".books">Bücher</li>
<li class="filter_link" data-filter=".toys">Spielzeug</li>
<li class="filter_link" data-filter=".cams">Kameras</li>
<li class="filter_link" data-filter=".auktionen">Auktionen</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-9 main">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 handys">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 spiele">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 books">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 toys">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 cams">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 auktionen">
<div>...</div>
</div>
</div>
</section>
Unfortunately it does not work porperly. It would be very nice if anyoine could help me with that. Thank you very much!

$(".filter_link").click(function(e){
$('.row > div.col-lg-9').hide()
$($(this).data("filter")).show()
});
.handys, .spiele, .books, .toys, .cams, .auktionen{
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="area1">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center pb-10">
<h3 class="title">Aktuelle Angebote</h3>
<p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="offer-menu text-center mt-50">
<ul>
<li class="filter_link" data-filter=".all" class="active">Alles</li>
<li class="filter_link" data-filter=".handys">Handys</li>
<li class="filter_link" data-filter=".spiele">Videospiele</li>
<li class="filter_link" data-filter=".books">Bücher</li>
<li class="filter_link" data-filter=".toys">Spielzeug</li>
<li class="filter_link" data-filter=".cams">Kameras</li>
<li class="filter_link" data-filter=".auktionen">Auktionen</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-9 all">
<div>All</div>
</div>
<div class="col-lg-9 col-md-9 handys">
<div>Handy</div>
</div>
<div class="col-lg-9 col-md-9 spiele">
<div>Sp</div>
</div>
<div class="col-lg-9 col-md-9 books">
<div>Bool</div>
</div>
<div class="col-lg-9 col-md-9 toys">
<div>toys</div>
</div>
<div class="col-lg-9 col-md-9 cams">
<div>cams</div>
</div>
<div class="col-lg-9 col-md-9 auktionen">
<div>.aut</div>
</div>
</div>
</div>
</section>

At first, you need all categories into one div. also you used data attribute with classname.
in my example i've called like you "all"
<div class="col-lg-9">
<div class="all">
<div class="handys">
<div>handys</div>
<div>handys 2</div>
<div>handys 3</div>
</div>
<div class="spiele">
<div>spiele</div>
<div>spiele 2</div>
<div>spiele 3</div>
</div> ....
</div>
</div>
script
var $shopElements = $('.offer-menu ul');
$('.filter_link').click(function(e) {
var filterVal = $(this).data('filter');
$(".all > div").show();
if(filterVal == "all") return;
$(".all > div:not(." + filterVal + ")").hide();
});
working example on jsFiddle: https://jsfiddle.net/wjs640kt/
or same code here at Run code snippet:
var $shopElements = $('.offer-menu ul');
$('.filter_link').click(function(e) {
var filterVal = $(this).data('filter');
$(".all > div").show();
if(filterVal == "all") return;
$(".all > div:not(." + filterVal + ")").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center pb-10">
<h3 class="title">Aktuelle Angebote</h3>
<p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="offer-menu text-center mt-50">
<ul>
<li class="filter_link" data-filter="all" class="active">Alles</li>
<li class="filter_link" data-filter="handys">Handys</li>
<li class="filter_link" data-filter="spiele">Videospiele</li>
<li class="filter_link" data-filter="books">Bücher</li>
<li class="filter_link" data-filter="toys">Spielzeug</li>
<li class="filter_link" data-filter="cams">Kameras</li>
<li class="filter_link" data-filter="auktionen">Auktionen</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="all">
<div class="handys">
<div>handys</div>
<div>handys 2</div>
<div>handys 3</div>
</div>
<div class="spiele">
<div>spiele</div>
<div>spiele 2</div>
<div>spiele 3</div>
</div>
<div class="books">
<div>books</div>
<div>books 2</div>
<div>books 3</div>
</div>
<div class="toys">
<div>toys</div>
<div>toys 2</div>
<div>toys 3</div>
</div>
<div class="cams">
<div>cams</div>
<div>cams 2</div>
<div>cams 3</div>
</div>
<div class="auktionen">
<div>auktionen</div>
<div>auktionen 2</div>
<div>auktionen 3</div>
</div>
</div>
</div>
</div>
</div>

jQuery sort multiple DIVs if contains <span> text

I have multiple sections in which I want to sort the DIVs if contains <span> text in it otherwise. I tried different stackoverflow threads but nothing helps for me so far, I am little near to my target but my code doesn't work I am not sure what I am doing wrong in it, these inner divs needs to be sorted inside each section. but I am not good at JS.
If div contains the span text it bring it to first in each section.
sortUsingNestedText($('#toSort'), "div.customCardData", "span.recenUpdate");
function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
console.log("done");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
Here is my jsFiddle

Firstly note that you have created multiple elements with the same id of toSort. This is invalid as id must be unique within the DOM. If you want to group elements by common behaviour use classes instead.
I want to bring the span ones one first in each section
In this case you don't need sort. Just append() the relevant div to the start of their group:
$('.toSort').each(function() {
var $h2 = $(this).find('h2');
$(this).find('.customCardData:has(span.recenUpdate)').insertAfter($h2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>

Bootstrap Placing Elements one under another

I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?

The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>

third level of mega menu doesn't work

I create menu in three level code in jsfiddle. but it doesn't work property. I want to design it like digikala.com. but I have problem.third level of menu does't show. please help me. sorry I am new in html
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
buy100
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
منو اصلی<b class="caret"></b>
<ul class="nav navbar-nav dropdown-menu">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
منو 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
.col-sm-12
</div>
</div>
<div class="row">
<div class="col-sm-6">
.col-sm-6
</div>
<div class="col-sm-6">
.col-sm-6
</div>
</div>
<div class="row">
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
</div>
<div class="row">
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
</div>
<div class="row">
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
</div>
<div class="row">
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
</div>
</li>
</ul>
</li>
<!--With Offsets
-->
<li class="dropdown yamm-fw">
منو2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4 col-sm-offset-4">
4 offset 4
</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
6 offset 6
</div>
</div>
</li>
</ul>
</li>
<!--Aside Menu
-->
<li class="dropdown yamm-fw">
منو3<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-9">
<br>
<h3>
9
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Nesting Menu
-->
<li class="dropdown yamm-fw">
منو4<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
12
</div>
</div>
<div class="row">
<div class="col-sm-12">
12
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
</ul>
</div>
</div>

finally I find my answer . you can see it here mega menu in three level. correct script is:
<script>
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = menu.offset();
if ((menupos.left + menu.width()) + 30 > $(window).width()) {
var newpos = -menu.width();
} else {
var newpos = $(this).parent().width();
}
menu.css({ left: newpos });
});
</script>

How to display sub menu-items on hover of main-menu in following scenario?

I have taken dump of bootstrap3 for menubar.
Its working fine, onclick of main-menu it is displaying sub menu-items.
But what i want is, on hover of main-menu sub menu-items should be displayed.
Following is code of onclick working menu bar:
<div class="jumbotron">
<div class="container">
<p class="lead">Grid Example</p>
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Yamm Megamenu
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">Grid<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</li>
</ul>
</li>
<!--
<With>Offsets </With>
-->
<li class="dropdown yamm-fw">Offset<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
</div>
</li>
</ul>
</li>
<!--
<Aside>Menu </Aside>
-->
<li class="dropdown yamm-fw">Aside<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3"><br>
<h3>3</h3><br>
</div>
<div class="col-sm-9"><br>
<h3>9</h3><br>
</div>
</div>
</li>
</ul>
</li>
<!--
<Nesting>Menu </Nesting>
-->
<li class="dropdown yamm-fw">Nesting<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-12">12
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript is as following:
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
can any one help me out to resolve this.
Thanks in advance.

Try This one:
<script>
$("#nav li").hover(
function(){
$(this).children('ul').hide();
$(this).children('ul').slideDown('slow');
},
function () {
$('ul', this).slideUp('slow');
});
</script>
and make your as like this
<ul id="nav">

Categories

Resources