I am trying to create a mockup of a website using bootstrap nav dropdowns. I am still new to this and I have read through posts about this and tried various edits, but my dropdown is still not activating when I click it. Any suggestions or pointers would be very appreciated. Thanks!
Link to my jsfiddle: https://jsfiddle.net/allisoncodes/sdywsaf4/10/
HTML:
<div class="dropdown">
<button class="btn btn-default">
<a href="#home">
<icon class="fa fa-home"></icon>
</a>
</button>
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Community
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Recent Activity</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Forum</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Groups</a></li>
</ul>
<button class="btn btn-default">
Pet Help</button>
<button class="btn btn-default">Pets For Sale</button>
<button class="btn btn-default">Pets Services</button>
<div class="content">
</div>
</div>
jQuery:
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});
It turns out that my code was correct, I had just forgotten to include the jQuery CDN. Thanks for the help!
Related
<div className="input-group-btn" data-dropdown>
<button className="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown" aria-expanded="true">
<span id="sortevent1" tabindex="0">1.select</span><span
id="arrow" className="glyphicon glyphicon-align-center"></span>
</button>
<ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="1">1.select <span id="arrow-up"
className="glyphicon glyphicon-indent-right"></span></a>
</li>
<li role="presentation"><a role="menuitem" tabindex="2">2.select <span id="arrow-down"
className="glyphicon glyphicon-indent-left"></span></a>
</li>
<li role="presentation"><a role="menuitem" tabindex="3">3.select <span id="arrow-up"
className="glyphicon glyphicon-indent-right"></span></a>
</li>
<li role="presentation"><a role="menuitem" tabindex="4">4.select <span id="arrow-up"
className="glyphicon glyphicon-indent-right"></span></a>
</li>
</ul>
</div>
How to select <li> and write button value(select button dropdown like select option) in reactjs?
Please help, I tried <li> inside onClick={this.userevent(this.target.tabindex)} and onChange but
userevent =(event)=>{
console.log(event)
}
it didn't work it. How do I do with this code? Maybe use tabindex='1',2,3
Use the onFocus() event, and consider providing the tabindex to the li itself. Also, make the test of the button dependent on a state variable, which you set on switching between the options. Here is a working example.
<div className="input-group-btn" data-dropdown>
<button className="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown" aria-expanded="true">
<span id="sortevent1" tabindex="0">{this.state.selected}</span><span
id="arrow" className="glyphicon glyphicon-align-center"></span>
</button>
<ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" tabindex="1" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem" >1.select <span id="arrow-up"
className="glyphicon glyphicon-indent-right"></span></a>
</li>
<li role="presentation" tabindex="2" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem" onFocus={(e)=>{console.log(e.target.parentElement.value)}}>2.select <span id="arrow-down"
className="glyphicon glyphicon-indent-left"></span></a>
</li>
<li role="presentation" tabindex="3" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem" >3.select <span id="arrow-up"
className="glyphicon glyphicon-indent-right"></span></a>
</li>
<li role="presentation" tabindex="4" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem" >4.select <span id="arrow-up"
className="glyphicon glyphicon-indent-right"></span></a>
</li>
</ul>
</div>
These are changes I made:
1. Moved Tabindex to li from a.
2. Replaced the text in the button by this.state.selected
3. added onFocus event-handlers to each li
You can refactor it further. And do not forget to set the initial state in the constructor.
I have 2 dropdown menu items under single parent dropdown class. But when I click dropdown action 1 then it is showing the body of dropdown menu 2 items.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The <strong>toggle</strong> method toggles the dropdown.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
<br>
<br>
<button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div><br>
<p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p>
</div>
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown("toggle");
});
</script>
</body>
</html>
Here is the fiddle link: https://jsfiddle.net/ajay1008/jumpgkfc/
So I want to open their respective body dropdown-menus.
you must wrap each dropdown button in another .btn-group.
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1
<span class="caret"></span></button>...</div>
mycode(you can copy this code):
https://jsfiddle.net/rezajafari2a/c1yw3hbv/
Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker
Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">
We are trying to code a way to click one of the vegetable selections and have it be added to a list at the side of the page
<div class="container">
<h2>
</h2>
<p></p>
<div class="dropdown">
<div id="dropdown" style="position:fixed; left:400px; top:120px;" class="main">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Vegetable
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menutype" tabindex="1" href="#">Carrots</a></li>
<li role="presentation"><a role="menuitem" tabindex="2" href="#">Tomatos</a></li>
<li role="presentation"><a role="menuitem" tabindex="3" href="#">Lettuce</a></li>
<li role="presentation"><a role="menuitem" tabindex="4" href="#">Peas</a></li>
<li role="presentation"><a role="menuitem" tabindex="5" href="#">Green Beans</a></li>
<li role="presentation"><a role="menuitem" tabindex="6" href="#">Potatoes</a></li>
<li role="presentation"><a role="menuitem" tabindex="7" href="#">Corn</a></li>
<li role="presentation" class="divider"></li>
</ul>
</div>
</div>
I would create a new function and add this to the dropdown:
onChange="OnSelectedIndexChange()"
And modify this function to your needs. Upon new selection on the dropdown, it will append the li item to your other list (ul). Maybe you need to change the attribute you want to get the text instead of the value.
//function for changed selection
function OnSelectedIndexChange()
{
document.getElementById('myListOfItems').append("<li>"+document.getElementById('dropdown').value+"</li>");
}
I am making a simple dropdown menu using Bootstrap 3 to sort my list of users as follows:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name<span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
</ul>
</div>
However, the glyphicon is not aligned on the same line. How can I make it be on the same line as "First Name"?
What version of bootstrap are you using?
New version 3.3.1 works just fine, here is working fiddle
http://jsfiddle.net/52VtD/9050/
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name <span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
</ul>
</div>
Many thanks for your investigations. Since it appears that the JavaScript and HTML are not the problems, I decided to check my css file and found that I was overriding the default dropdown class specs. I have since adjusted it, and now it works as expected. Thanks again for all those who helped, I will upvote. :)