I have write my own document click function $(document).click(function(e) { to trace click and hide my custom build menu. However, when I clicked on Bootstrap standard drop down menu, my document click function is being skipped from running.
<li class="dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Log Out</li>
</ul>
</li>
For better explanation, here is my sample code: http://jsfiddle.net/XwjE6/2/ As you can see if you clicked on "My Menu" and then click on "Settings", "My Menu" doesn't disappear.
How can I ensure my document click function is always listen click and execute code? So that I can get my menu to hide when user click on bootstrap menu. Thanks.
Related
I have a dropdown menu that currently displays the dropdown unordered list on hover, which are lists of links. Hover is problematic for users and I want to change the to 'click' or 'toggle'. Here is the code currently in the site:
$("#main_nav .dropdown").hover(function() {
$('.dropdown-menu', this).fadeIn("fast");
$('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
$(this).addClass('active');
},
function()
{ $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
});
if I switch the .hover to .toggle the drop down menus work as I would expect them to. The problem is it now breaks my links. When I click on them they do nothing and go nowhere. Here is the HTML:
<ul class="nav_main">
<li class="active">Home</li>
<li class="dropdown">
Decisions <b class="caret"></b>
<ul class="dropdown-menu mega-menu" id="decisions">
<li class="mega-menu-column">
<ul>
<span>
<li>Our Decision on CanLII</li>
<li>SCC Decisions</li>
<li>Canada Supreme Court Reports (PDF)</li>
<li>vLex Canada Open</li>
<li>Sask Cases Judicially Considered</li>
</span>
<span>
<li>Federal Court</li>
<li>Quebec (translated decisions)</li>
<li>Tax Court of Canada</li>
</span>
<span>
<li class="list-heading">Tribunals</li>
<li>Automobile Injury Appeal Commission</li>
<li>Law Society of Saskatchewan</li>
<li>Labour Arbitration Awards – Sask</li>
<li>Sask LRB (CanLII)</li>
<li>Sask LRB</li>
</span>
</ul>
</li>
</ul>
Is there any easily explainable reason as to my this simple switch in code is causing the links to stop working completely?
Thanks in advance!
I was unable to precisely reproduce the issue with the code you provided, but I did observe issues clicking some of the links.
Removing the invalid span elements from the ul seems to have corrected the observed issue.
Try removing those span tags from the ul.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Allowed child elements of ul
My guess would be that your .toggle is hijacking the click event for the whole container. So when you click a link it's toggling the menu rather than firing the default click for a link. You may try stopping propagation on the links, so it doesn't fire the click event on the parent menu:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Open submenu >
<ul class="dropdown-menu">
<li>
Submenu link
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->
http://codepen.io/Deka87/pen/ORyRLd
It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.
Any ideas would be highly appreciated!
Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event
$(".navbar").on("click", ".dropdown-submenu > a", function(){
....
....
});
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);
});
I'm working with Boostrap for the first time ever, please don't kill me :D
I have a problem with my navigation bar. I have 7 menus, each with a dropdown of its own. The problem is that when I click on a menu, they all dropdown at the same time, and I need only to dropdown the one I clicked on. My JS code is pretty rudimentary.
This is what I used so far:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
And the HTML code is this, (example for one menu; each menu has a similar code):
<li class="dropdown">
Organizare <b class="caret"></b
<ul class="dropdown-menu">
<li>Conducere</li>
<li>Consiliu</li>
<li>Departamente</li>
<li>Administratie</li>
<li>Secretariat</li>
</ul>
</li>
What do I need to change so that only the menu I click on dropdown ?
Thanks!
Find the menu following the toggle:
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').toggle();
});
Example: http://codepen.io/paulroub/pen/YXKzGm
If you have multiple menus, I prefer to use this:
$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').slideUp();
$(this).next('dropdown-menu').slideDown();
);
});
The advantage to this is that it will close any other open dropdown menus and then open the one that has been clicked.
It can be further improved to check if the .dropdown-toggle that was clicked is currently open.
The issue is that the handler you're registering will select anything with the class dropdown-menu, then toggle it, because you've written:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
As you say, you don't want to toggle everything with that class, you just want to toggle what was clicked, so you should use the event parameter from click() to find what's been clicked, and select the relevent dropdown-menu to toggle:
$('.dropdown-toggle').click(function(e) {
$(e.target).next('.dropdown-menu').toggle();
});
I was able to do it with this HTML
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu dd1" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu dd2" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
and this jQuery:
$(".dropdown-toggle").click(function(e) {
$(this).next('.dropdown-menu').toggle();
});
NOTE:
just the the JS did not work for me.
data-toggle, bootstrap seems to use this to identify which <ul> to toggle based on class name.
used that in combination with Paul Roub's answer to override the default behavior.
I am running WebdriverJS on nodeJS to test the UI of a website. I want select and click on a submenu item in a drop down menubar. The submenu items are hidden by CSS. The menubar looks like this:
<ul class="dropdown" id="mainNavList">
<li class="active">
<span>Home</span>
</li>
<li class="">
<span>My Products</span>
<ul style="visibility: hidden;">
<li class="">
Product A
</li>
<li class="">
Product B
</li>
</ul>
</li>
<li>...</li>
</ul>
If I try to run this approach:
mydriver.executeScript("return $(\"a:contains('My Products')\").mouseover();").then(function(){
mydriver.findElement(mywebdriver.By.xpath("//a[contains(text(), 'Product B')]")).click();
});
the drop down slides down but hides directly after showing it. On the console I get an error from Webdriver:
ElementNotVisibleError: Element must be displayed to click (WARNING: The server
did not provide any stacktrace information)
Any ideas?
This is new to me as well but I would chain function calls of Click on the drop down then click the drop down item you want.
try this:
var menu = mydriver.findElement(mywebdriver.By.css('[href="/MyProducts"]'));
menu.click();
menu.findElement(mywebdriver.By.css('[href="/jkjkjk"]')).click();
As James said it's about chaining. In the snippet above the chaining is implicit (both findElement and click methods add a frame to the webdriver.controlFlow().