Attempting to collapse a dropdown menu (language selection), within a mobile bootstrap navbar. On first click, the dropdown menu with the languages opens fine, after changing languages the dropdown language menu closes, but when I attempt to change the language again, I have to double click the dropdown for it to open. Can anyone help me with this?
<li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-click="visible = true">
{{vm.languageSel.name}}
<span class="caret"></span>
</a >
<ul class="dropdown-menu" ng-show="visible">
<li ng-repeat="lang in vm.languages" ng-click="$parent.visible = false">
<a ng-click="vm.chgLang($index)">
{{lang.name}}
</a>
</li>
</ul>
</li>
I think it's because visible is initialised by default to false. Try to add ng-init="visible = true" on the first li directive
I think it's because of the $parent. Can you try without it? Like this:
<li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-click="visible = true">
{{vm.languageSel.name}}
<span class="caret"></span>
</a >
<ul class="dropdown-menu" ng-show="visible">
<li ng-repeat="lang in vm.languages" ng-click="visible = false">
<a ng-click="vm.chgLang($index)">
{{lang.name}}
</a>
</li>
</ul>
</li>
Related
I've got a bootstrap 3 drop down and it should close when the user is clicking on the same link again.
Here's my html:
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung</li>
<li class="menu-geselle">Geselle</li>
<li class="menu-meister">Meister</li>
</ul>
</li>
If I click on the a.dropdown-toggle the drop down opens - which is correct. If I click the same link again, the drop down doesn't close.
Can anybody help me with that?
I couldn't find something on SO or anywhere else.
Thanks.
Use this code. It will give you desired result.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ausbildung</li>
<li>Geselle</li>
<li>Meister</li>
</ul>
</div>
You have data-target="#" which prevents it closing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung
</li>
<li class="menu-geselle">Geselle
</li>
<li class="menu-meister">Meister
</li>
</ul>
</li>
Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:
<div class="btn btn-link dropdown account-menu-btn">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Create
</a>
</li>
</ul>
</div>
I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?
<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul id="myModal" class="dropdown-menu pull-right" role="menu">
<li>
<a href='#Url.Action("About", "Home")'>
Create
</a>
</li>
</ul>
</div>
I believe the answer is clearly stated in the twitter-bootstrap javascript section
Your code isn't really too far from what's on there:
<div class="btn btn-link dropdown account-menu-btn">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
<li>
Create
</li>
</ul>
</div>
Hope this helps
You could also try to do it with Javascript and Jquery.
$( '#BUTTONID' ).click(function() {
$( '#MENUID' ).toggle();
});
This is a very condensed version, but it is ought to work.
I have an app that uses Bootstrap 3. In that app, I have a menu aligned to the right of the screen. That menu can be seen in this fiddle. The code for the menu looks like this:
<div class="dropdown pull-right">
<a id="myDrop" href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
<i class="glyphicon glyphicon-home"></i>
<span class="caret"></span>
</a>
<ul id="myMenu" class="dropdown-menu" role="menu" aria-labelledby="myDrop">
<li role="presentation" class="active">
<a role="menuitem" tabindex="-1" href="#" data-target="#home">
<i class="glyphicon glyphicon-home"></i>
Home
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" data-target="#profile">
<i class="glyphicon glyphicon-user"></i>
Profile
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" data-target="#messages">
<i class="glyphicon glyphicon-inbox"></i>
Messages
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" data-target="#settings">
<i class="glyphicon glyphicon-cog"></i>
Settings
</a>
</li>
</ul>
</div>
The text beside each icon is not centered vertically. My real problem though is, when a user chooses a menu item, I want to update the icon that's shown in myDrop. The icon in myDrop should change to be the icon of the chosen menu item. I was able to get the text by using the following:
$('#myMenu li a').on('click', function () {
var $this = $(this);
var parent = $this.closest('li');
var target = $this.data('target');
var btn = $this.closest('.dropdown').find('.btn.dropdown-toggle');
var str = $this.text() + " <span class='caret'></span>";
parent.siblings().removeClass('active');
parent.addClass('active');
btn.html(str);
$('#myTab a[href="' + target + '"]').tab('show');
});
This selects the text though. It does not use the icon. I tried using jQuery's .find function. However, I kept getting undefined. I'm not sure what I was doing wrong.
You can just change:
btn.html(str);
to
btn.html($(this).html()).append("<span class='caret'></span>");
http://jsfiddle.net/wnje9zak/3/
Or, if you just want the icon, you could do:
btn.html('').append($(this).find('i').clone()).append("<span class='caret'></span>");
In a tag bootstrap datatoggle and href="#home" is notwoking ....how to implement it
<li class="dropdown">Oculistica Venturino <i class="fa-caret-down"></i>
</li>
http://responsive-ui.com/babys9/
Do you have a Code pen account? Working on this side. Try this link.
http://codepen.io/dfrierson2/pen/RNoWZe
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown trigger <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Oculistica Venturino</li>
</ul>
</div>
Hi this should work according to bootstrap's documentation you should use a element or, if using a more generic element such as a , add a role="navigation".
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown trigger <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Oculistica Venturino</li>
</ul>
</div>
I have a one html page and top of the page I am display the some menu .under menu having some li. Now I want to click on any li and displaying the content of each li below the iframe:
<div class='main_container'>
<ul class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Tea <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation">Tea1</li>
<li role="presentation">Tea2</li>
</ul>
</li>
<div id="nav">
<iframe id='link'></iframe>
</div>
</div>
Can anyone tell me how I can do that?
use target="iframe"
here is the example http://jsfiddle.net/47tub983/