Is there a way to recognize that angular-bootstrap dropdown-menu is closed?
I want to recognize this event and run specific function.
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Add to your parent div an on-toggle event
<div class="btn-group" dropdown is-open="status.isopen" on-toggle="toggled(open)">
And handle it witin the controller
$scope.toggled = function(open) {
if (open) {
console.log('is open');
} else console.log('close');
}
Related
I have a standard Bootstrap (3.3.7) nav item with 2 dropdown menus. Upon loading the page, the first dropdown item in the nav should be exposed by default. When hovering over the second dropdown item, that item should now be the only exposed dropdown until the first is hovered over again. Clicking anywhere on the page should not close any dropdown menu, and clicking on the name of the dropdown (Dropdown #1, etc) must function as a link.
I currently have it so the nav is exposed by default and the nav switches on hover, but clicking anywhere on the page closes the dropdown and I do not know how to override this. Also, is there a better way to have the first item defaulted to open?
My code looks something like this:
$(document).ready(function() {
var $dropdown = $(".nav li.dropdown");
$dropdown.first().addClass('open');
$dropdown.hover(function() {
if (!$(this).hasClass('open')) {
$dropdown.removeClass('open');
$(this).addClass('open');
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse navbar-collapse" id="test-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown #1 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown #2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You can prevent the default action of hide.bs.dropdown while closing (removing open class) current dropdown on element click. It's enough to add:
$dropdown.on('hide.bs.dropdown', function (e) {
e.preventDefault();
})
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
$(this).closest('li.dropdown').toggleClass('open forceclose');
})
And avoid to add open class to current dropdown if it has the class forceclose.
$(".nav li.dropdown").on('mouseenter', function (e) {
if (!$(this).hasClass('open')) {
$(".nav li.dropdown").removeClass('open');
if ($(this).is('.forceclose')) {
$(this).removeClass('forceclose');
} else {
$(this).addClass('open');
}
}
}).on('hide.bs.dropdown', function (e) {
e.preventDefault();
}).first().addClass('open');
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
$(this).closest('li.dropdown').toggleClass('open forceclose');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="collapse navbar-collapse" id="test-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown #1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown #2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
Can you please take a look at this demo and let me know why I am not able to properly animate the .fa classes? As you can see the animation works fine on clicking on each button but is not affecting to other buttons. For Example if you click on Action A and then click on Action B the arrow on Action A still is in previous state.
$(".dropper").on("click", function(){
//$('.dropper').find('.fa').removeClass('css-chevron-down').addClass('css-chevron-right');
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
.css-chevron-down{
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right{
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="col-sm-12">
<div class="col-sm-6 "><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div></div>
<div class="col-md-6" style="float:left; margin-left:200px;"><div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div></div>
</div>
You have to write some code to bring the arrow to its original state, when the dropdown closes. The event you need for that is hide.bs.dropdown. The following piece of code will do the trick:
Code:
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
Also, be sure to check out the following snippet to see live how it works.
Snippet:
/* ----- JavaScript ----- */
$(".dropper").on("click", function() {
$(this).find('.fa').toggleClass('css-chevron-right css-chevron-down');
});
$("body").on("hide.bs.dropdown", function (e) {
var i = $(e.relatedTarget).find(".fa");
i.removeClass("css-chevron-down").addClass("css-chevron-right");
});
/* ----- CSS ----- */
.css-chevron-down {
transform: rotate(0.25turn);
transition: all 0.5s ease;
}
.css-chevron-right {
transition: all 0.5s ease;
}
<!----- HTML ----->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-6 ">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action A <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
<div class="col-md-6" style="float:left; margin-left:200px;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropper" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action B <i class="fa fa-chevron-right css-chevron-right" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
I am trying to update the content of .help-block dynamically with using jQuery but not sure why I am not able to target the .help-block I know that we can simply use $('.help-block').text(.... but as I said I need to do this through jQuery Traversing mechanism like using following find() or next() and first() but none of them did the job!
$(function(){
$(".dropdown-menu li a").click(function(){
$("#selector").find('.help-block').html($(this).text());
$("#selector").next('.help-block').html($(this).text());
$("#selector").parent().find('.help-block').html($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="new-cu-emailinput"></label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="selector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Please Select From the List<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></button>
<ul class="dropdown-menu" aria-labelledby="selector">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<span class="help-block pull-right"></span>
</div>
</div>
</div>
Can you please let me know what I am doing wrong?
Your selectors are wrong. Try like following.
$("#selector").closest('.dropdown').next('.help-block').html($(this).text());
I'm trying to build a list-group, with each item in the list have an icon which will trigger a dropdown menu. I have a few problems how to position the dropdown, also the glyphicon is not visible at all, unless I put text in the button, and then it has a bad position.
Also I want to build and position the dropdown dynamically with javascript, but first I need to see one that is position correctly, then I will do all the JS DOM work..
Thanks for help!
jsfiddle:
https://jsfiddle.net/DTcHh/24900/
Some code:
<div class="container">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
</ul>
</div> <!--.col-sm-4 -->
<div class="col-sm-8">
</div>
</div>
I've updated the version of bootstrap css to a cdn version which includes the glyphicons. I have then moved the anchor element next to the icon which I believe is what you're looking for. I also removed your custom css which was causing a layout issue.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-option-vertical"></i>
option
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
https://jsfiddle.net/DTcHh/24902/
I am slightly new to web development and I am trying to teach myself. I am trying to make a searchbar with a dropdown, so far I have made it but I have a problem with the last button, it will be used as the search button. It doesnt fix on the left hand side, it just floats under the bar.
<div class="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn"><span class="fa-search"></span></button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<button type="button" class="btn-search"><span class="fa-search">
</div><!-- /input-group -->
</span></button>
</div><!-- ...search -->
This is how you would do a search with a dropdown- you are almost there.. just move the input after the ul
<div class="col-lg-5">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Categories <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
link to demo