angular2 bootstrap3 dropdown error - javascript

Hi developers , My Angular2 project i try bootstrap dropdown "Mail" is working but
second dropdown not working


Here is an example of nested dropdown.
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Related

Open 2 bootstrap dropdown within single parent dropdown class but 2 different dropdowns

I have 2 dropdown menu items under single parent dropdown class. But when I click dropdown action 1 then it is showing the body of dropdown menu 2 items.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The <strong>toggle</strong> method toggles the dropdown.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
<br>
<br>
<button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div><br>
<p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p>
</div>
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown("toggle");
});
</script>
</body>
</html>
Here is the fiddle link: https://jsfiddle.net/ajay1008/jumpgkfc/
So I want to open their respective body dropdown-menus.

you must wrap each dropdown button in another .btn-group.
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1
<span class="caret"></span></button>...</div>
mycode(you can copy this code):
https://jsfiddle.net/rezajafari2a/c1yw3hbv/

How to hide navbar collapse when we click on outside?

I am facing the issue in when i click on the icon bar the drop down menu opens and then when i click on the another menu (Alumini menu ) ,the iconbar's drop down menu is not closed but both the alumini menu and the icon bars dropdown menu is viewed.I don't know why the iconbar's drop down menu is not closed while clicking the alumini menu.
The html code for design is uploaded below.
<div class="join">
<!-- Nav Starts -->
<nav class="navbar navbar-default container-fluid wrap">
<div class="container pos-relative">
<div class="navbar-header">
<ul class="new pull-left">
<li class="old"> <img class="img-responsive" src="<?php bloginfo( 'template_url' ); ?>/images/skv-logo-100px.png"></img> </li>
<li> <a class="navbar-brand create hidden-xs" href="http://localhost/wordpress">SKV Vidhyaashram</a> </li>
</ul>
<ul class="nav navbar-nav navbar-main pull-left hidden-xs">
<li>News & Events</li>
<li>Toppers</li>
<li>Achievements</li>
<li>ISA Activities</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Alumni</a>
<ul class="dropdown-menu alumni-menu">
<li>Alumni Home</li>
<li>Committee Members</li>
<li>Gallery</li>
<!-- <li>Events</li> -->
</ul>
</li>
<li><a class="user-icon" href="http://dev.seyali.com/alumni_demo/public/login" data-toggle="tooltip" data-placement="right" title="Login"> <span class="glyphicon glyphicon-user"></span></a></li>
</ul>
<button type="button" class="quicklinkbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#quicklinkbar" aria-expanded="false" aria-controls="quicklinkbar">
<span class="sr-only">Toggle navigation</span>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> About Us<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Chairman's Notes</li>
<li>Mission & Vision</li>
<li>Principal's Notes</li>
</ul>
</li>
<li class="dropdown list">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>CBSE Circular</li>
<li>Academic Objectives</li>
<li>CBSE & Afflitation</li>
<li>Grades Prekg to X</li>
<li>Innovative Teaching Methods</li>
<li>Labs & Library</li>
<li>Prekg,Juniorkg & Seniorkg</li>
<li>School Terms & Curriculum</li>
</ul>
</li>
<li class="dropdown list1">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Beyond-Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Co-curricular</li>
<li>Extra-curricular</li>
<li>Life at SKV</li>
</ul>
</li>
<li class="dropdown list2">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Sports & Games<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Sports Activities</li>
<li>Sports Facilities</li>
</ul>
</li>
<li class="dropdown list3">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Admission Fees<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Registration & Admission</li>
<li>Entrance Examination</li>
<li>Fees & Payment</li>
</ul>
</li>
<li class="dropdown list4">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Gallery<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Image Gallery 2014-2015</li>
<li>Image Gallery 2016-2017</li>
<li>Video Gallery</li>
</ul>
</li>
<li class="dropdown list5">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Careers<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Working at SKV</li>
<li>Positions Vacant</li>
<li>General Information</li>
<li>Apply Online</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<div id="quicklinkbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>News & Events</a></li>
<li><a>Toppers</a></li>
<li><a>Achievements</a></li>
<li><a>ISA Activities</a></li>
<li><a>Alumni</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Nav Ends -->
And the image is attached below
In above attached the two menus are apperaing , in that when i click on the icon bar drop down menu o[pens and again when i click on the alumini menu alumini menu opens but iconbars drop down menu is not closed.Please help me how to solve this.

angularjs: uib dropdown submenu not working

Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker

Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">

How to create dropdown menu with nested submenu using jQuery

i want to create a dropdown menu with nested submenu so that when users over on a submenu it should display its dropdown list and when the mouse is taken out of the submenu it should hide its dropdown list. i have tried but it works only with on click() method but i want to use on hover(). here is my code
html
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="design/img/logo.png" alt="logo"></a>
<h6><small>Some text</small></h6>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="main-navigation">
<li class="">Accueil</li>
<li class="dropdown">
Groupe Cible <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1" href="#">Cible Etudes & Conseils <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1">Qui Sommes Nous <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li>Cible Etudes/Conseil</li>
<li>Notre Vision</li>
<li>Notre Mission</li>
<li>Nos Valeurs</li>
<li>Notre Force</li>
<li>Nos Filiales</li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" href="#" data-toggle="dropdown">Notre Offre </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Enquêtes et Sondage</a>
<ul class="dropdown-menu">
<li><a tabindex="0">procédures Qualité</a></li>
<li>Méthodes</li>
<li><a tabindex="0">outils de Collecte</a></li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Etudes</a>
<ul class="dropdown-menu">
<li class="test" class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Marketing</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Marché</a></li>
<li><a tabindex="0">Consommateurs</a></li>
<li><a tabindex="0">Stratégie Marketing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" class="test" href="<?=url::site('fr/a_propos/14/development')?>" tabindex="0" data-toggle="dropdown">Développement</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Impact environnemental</a></li>
<li><a tabindex="0">Développement Urbain et Local</a></li>
<li><a tabindex="0">Assainissement</a></li>
<li><a tabindex="0">Evaluation des projets et programmes</a></li>
</ul>
</li>
<li><a tabindex="0">Moyens Logistiques</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">Le Conseil</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Conseil en Marketing</a></li>
<li><a tabindex="0">Conseil en Gestion</a></li>
<li><a tabindex="0">Recherche de Financement</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">La Formation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Formation en Vente</a></li>
<li><a tabindex="0">Formation en Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu" >
<li>Cameroun</li>
<li>Afrique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
<!-- =========================== cible RH ============================== -->
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Cible RH Emploi</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Qui Sommes Nous </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Cible RH Emploi</a></li>
<li><a tabindex="0">Notre Vision</a></li>
<li><a tabindex="0">Notre Mission</a></li>
<li><a tabindex="0">Nos Valeurs</a></li>
<li><a tabindex="0">Notre Force</a></li>
<li><a tabindex="0">Nos Filiales</a></li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li >Notre Offre </li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Afique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" href="" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown <?=(!empty($service))?"active":""?>">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li class="dropdown <?=(!empty($client))?"active":""?>">
Clients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>MTN</li>
<li>Apple</li>
</ul>
</li>
<li class="dropdown <?=(!empty($equipe))?"active":""?>">
Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Mark</li>
<li>John</li>
</ul>
</li>
<li class="dropdown <?=(!empty($partenaire))?"active":""?>">
Partners <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Bootstrap</li>
<li>Ubuntu</li>
</ul>
</li>
<li class="dropdown <?=(!empty($actualite))?"active":""?>">
News <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Perl</li>
<li>Python</li>
</ul>
</li>
<li class="dropdown <?=(!empty($project))?"active":""?>">
Projects <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Java</li>
<li>Ajax</li>
</ul>
</li>
<li class="dropdown <?=(!empty($contact))?"active":""?>">
Contacts <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Contact Cible Etudes/Conseils</li>
<li>Contact Cible RH</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
then my jquery
$('a.test + ul').css("display","none");
$('.dropdown-submenu').css("position","relative");
$('.dropdown-submenu .dropdown-menu').css({"top": "0","left": "100%","margin-top": "-1px"});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
please help me! Thanks.

You can do this by simply using CSS like follows-
.dropdown-submenu:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
Working fiddle here

bootstrap dropdown menu acting weird

I have this code:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<ul class="nav">
<li>Startseite</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
it shoud show up like this:
but it is showing up like this in my code(i click on produkte):
this is my header in html:
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/jquery191.js"></script>
<script src="{{STATIC_URL}}js/bootstrap.min.js"></script>
why is this? can someone please help me?
thanks a lot

you have used float:left for li you need to remove it from you custom css file.

Categories

Resources