Bootstrap Dropdown doesn't close on clicking link to same page - javascript

To preface, sorry if the answer lies in the javascript but I'm currently taking a course online and haven't yet learned javascript so I can't troubleshoot too well there since my understanding is really lacking right now.
I have a bootstrap dropdown menu with nav-pills below. My issue is that when I click a link in my work dropdown and the href links to another spot on the page (single page website) the menu doesn't close out after clicking. If the href is empty with a "#" then it closes out. I can't for the life of me solve this.
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
</li>
Let me know if I'm missing anything (javascript?) this is my first post.

Not too sure of the source of the problem but this is a nice work-around to forcefully close the dropdown menu.
<script>
//Can go in a sperate .js file as well
function closeDropdowns() {
$(".dropdown-toggle").each(function() {
$(this).attr("aria-expanded", false);
$(this).parent("li").removeClass("open");
});
}
</script>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>

When ever the link is clicked set back the.
aria-expanded to true on the main anchor tag with class dropdown-toggle
$('ul.dropdown-menu li a').on('click',function(){
$(this).closest('li.dropdown').find('a.dropdown-toggle').attr('aria-expanded','false');
});

Related

Bootstrap Scrollspy Navigate when clicking on dropdown

Is there a way to incorporate navigate the moment you click on a dropdown? Id like the page to navigate to section 4 upon clicking section for on the navigation bar and then if the user decides to navigate further from the list, they can by clicking on an item from the list. Thanks!
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
Bootstrap documentation provides exactly what you're looking for, please have a look :
Bootstrap scrollspy on navbar

Navbar dropdown list auto open and auto close?

I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});

bootstrap dropdown open on pageload

Ive got this dropdown styled with bootstrap:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> 15min </li>
<li> 1hod </li>
</ul>
</li>
and I want that dropdown menu to be rolled down on a page load, anyone know how to achieve that? thanks in advance :)
The dropdown is toggled with having the additional class 'open' added to the enclosing <li> element. So if you want to have it open on page loading:
<li class="dropdown open">
That will do the trick.
This little bit of jQuery script (I'm assuming you've loaded it becasue you're using Bootstrap) ought to do the trick. Once the DOM has loaded, it sends a click() to the dropdown toggle button.
$(document).ready(function () {
$("#posuvnik").click();
});
There is probably a way to do it in straight CSS, but without seeing more of your code it's hard to know.

Contextmenu with bootstrap dropdown not working in Firefox

I am trying to display a Twitter Bootstrap dropdown menu on right click on a element. This is the code that I wrote:
Javascript
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
toggle.dropdown('toggle');
return false;
});
HTML
<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This code works fine in Chrome and when I right click the menu is displayed properly, but on Firefox when I right click, the menu is displayed for a second and it disappears. Is there any other event that I need to handle too?
JSFiddle: http://jsfiddle.net/Serff/3/
Remove
data-toggle="dropdown"
The final html markup:
<div class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This should work.
Use this script:
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
e.preventDefault();
toggle.dropdown('toggle');
});

How to create click event for navigation drop down using html helper class?

I am using MVC 5. I have created navigation drop down. This is my code:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu">
Report
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="myselector">a </li>
<li>b </li>
</ul>
</li>
Now I have same controller but different actions for a and for b.
How to move to another page while click a and b. Is there any click event available?
I think it work with some js code, but you does not attach any js here. So, you need to add something to your html code for identify your links as different links.
Something like this
<li class="myselector action-show-a"><a>A</a></li>
<li class="myselector action-show-b"><a>B</a></li>
Then you need to select your elements using .myselector and add to them specified action according to .action-show-a and .action-show-b. For this purpose you need to add eventlistners to onclick actions.

Categories

Resources