I have same button for multiple times each one have same work that is of hide and show. I have to toggle following data after click on that button
<button type="button" class="pull-right btn menu">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="downmenu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
and js code is
$('.menu').click(function(){
$(this).each(function(){
$('.downmenu').toggle('show');
});
});
my problem is that after click on any button all buttons are working. How to toggle each separately. I have to toggle downmenu ul list on each button so how can i do it?
The loop inside the click event is redundant. The problem is the global selector for .downmenu which selects all elements with that class. The solution is to isolate the element .downmenu next to the button clicked:
$('.menu').click(function(){
$(this).next('.downmenu').toggle('show');
});
Related
I'm using dropdown feature from bootstrap. I want the menu still visible until I click back the button back. It must look like a switch . If we want to see the list, we must click the button, and also to hide it back. And it still open although we click in the outside and in the inside of the list button .
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>
<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#"
data-toggle="dropdown" data-target="#"
class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
I need to open and to close the dropdown menu , only from the button.
I use this, but still it hide the list when i click in the inside list.
Here is the solution
Fiddle
$('.keep-open #dLabel').on({
"click": function() {
$(this).parent().attr('closable', true );
}
})
Click event is sent when the bootstrap is failed on hide dropdown with another call to hide dropdown as suggested by author
Just add this to your code
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have an image at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the same position on the form once a user selects a value from the drop down?
My drop down is setup as:
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
My javascript is setup as:
$("#ulState li").on("click", function () {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
$("#ulState").focus();
});
In your page directive <%# Page... add this
MaintainScrollPositionOnPostback="true"
if this doesn't work for you have a look at this article here or here
Hope this will work for you
The solution is is to replace the href attribute with the data-target attribute.
// This will correct the behavior and keep the page focused.
<li><a data-target="#" data-value="something else here">Something else here</a></li>
// This will cause the page to jump
<li>Separated link</li>
This question already has an answer here:
Adding images with option tag [duplicate]
(1 answer)
Closed 6 years ago.
I try to create a search box with a dropdown inside the search text field and i want add a different image for every option
For now this is my result:
http://www.bootply.com/TqXN4y8Se5
The image are not visible, in dropdown are not possible add image?
Thanks for any help!
the html option tag does support text only
see other pst Adding images with option tag
altough you could use bootstraps dropdown component.
http://getbootstrap.com/components/#dropdowns
altough it requires custom javascript to listen to changes and react accordingly.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
You can use a background image but it's not available cross-browser. Or you can use jquery like http://jqueryui.com/selectmenu/#custom_render
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close.
I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too.
Is there a way to do this?
By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:
always - (Default) automatically closes the dropdown when any of its elements is clicked.
outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.
disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open.
Here is a sample : Plunker
<div class="btn-group" dropdown auto-close="disabled">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</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>