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>");
Related
Below is my html example
<ul class="navbar-nav mr-auto right">
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown01" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#mission"
class="mission">Mission</a>
<a class="dropdown-item" href="#contact"
class="contact">Contact</a>
<a class="dropdown-item" href="#portfolio"
class="portfolio">Portfolio</a>
</div>
below is my jquery
$(document).ready(() => {
$('.dropdown-menu a').click(() => {
var change = $(this).attr('id');
$('.dropdown-item .'+change).show();
$('.dropdown-item .'+change).siblings().hide();
});
});
What i am looking to do is hide all elements on page load and only show certain elemnts when menu item is clicked while making all other elements outside that div go back to being hidden.
You can find the contents you want to show, exclude them from a selection of all items, and hide what's left. You'll also want to specify that you only want to trigger the event on dropdown-toggle class as well:
$(document).ready(() => {
$('a.dropdown-toggle').click(function () {
var mine = $(this).siblings().children(".dropdown-item");
$('.dropdown-item').not(mine).hide();
mine.show();
});
});
.dropdown-item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav mr-auto right">
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown01" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#mission"
class="mission">Mission</a>
<a class="dropdown-item" href="#contact"
class="contact">Contact</a>
<a class="dropdown-item" href="#portfolio"
class="portfolio">Portfolio</a>
</div>
</li>
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown02" data-
toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Foobar</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="#mission"
class="mission">Mission</a>
<a class="dropdown-item" href="#contact"
class="contact">Contact</a>
<a class="dropdown-item" href="#portfolio"
class="portfolio">Portfolio</a>
</div>
</li>
</ul>
You have several issues in your code:
You are missing to add dropdown01 class in the anchor element with class dropdown-item. You need to add that class.
After adding the class your selector will be $('.dropdown-item.' + change) since both the class is in the same element so there will be no space between the class selector.
You can use $('.dropdown-item').hide(); before showing the elements. This will hide all the elements of that class first and show only the elements of the clicked menu in the next line.
You need to define a css where it hides all the elements with class .dropdown-item on page load.
$(document).ready(() => {
$('.dropdown-toggle').click(function() {
var change = $(this).attr('id');
$('.dropdown-item').hide();
$('.dropdown-item.' + change).show();
});
});
.dropdown-item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav mr-auto right">
<li class="nav-item dropdown drop-icon">
<a class="nav-link dropdown-toggle " id="dropdown01" data- toggle="dropdown" aria-haspopup="true" aria- expanded="false">Menu1</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item dropdown01" href="#mission" class="mission">Mission</a>
<a class="dropdown-item dropdown01" href="#contact" class="contact">Contact</a>
<a class="dropdown-item dropdown01" href="#portfolio" class="portfolio">Portfolio</a>
</div>
</li>
<li>
<a class="nav-link dropdown-toggle " id="dropdown02" data- toggle="dropdown" aria-haspopup="true" aria- expanded="false">Menu2</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item dropdown02" href="#mission" class="mission">Mission 2</a>
<a class="dropdown-item dropdown02" href="#contact" class="contact">Contact 2</a>
<a class="dropdown-item dropdown02" href="#portfolio" class="portfolio">Portfolio 2</a>
</div>
</li>
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>
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 this html code. There is two buttons each of the buttons have list item under them. Here is the html code:
<div class="col-xs-8">
<div class="dropdown pull-left">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
View
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a data-bind="click: function() { format('sgml_as_html') }">
Show Tags
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('html') };">
Quick View
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('show_link_targets') };">
Show Link Targets
</a>
</li>
<li role="presentation">
<a data-bind="click: function() { format('show_all_link_targets') };">
Show All Link Targets
</a>
</li>
</ul>
</div>
<div class="dropdown pull-left" style="margin-left: 10px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown_menu_preview" data-toggle="dropdown" aria-expanded="true">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown_menu_preview">
<li>
<a data-bind="click: function() { format('bwd_preview') };">
BWD Preview
</a>
</li>
<li>
<a data-bind="click: function() { format('blaw_preview') };">
BLAW Preview (Coming Soon)
</a>
</li>
<li>
<a data-bind="click: function() { format('print_preview') };">
Print Preview (default Notif Format)
</a>
</li>
</ul>
</div>
</div>
I would like to see how in java script i can add a check mark for the list item thats picked. Here is the html Unicode character i would like to use the check mark listed in the link: http://www.w3schools.com/charsets/ref_utf_dingbats.asp
figured it out. You have to do something like this.
<span data-bind="visible: format() == 'show_link_targets'"><i class="fa fa-check"></i></span>
I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>