<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.
Related
So here's my issue, I'm trying to include a facility where by in a search field if you check a checkbox it needs to remove any items which have data-isletagreed == 3 against them.
#if (prop.isLetAgreed == 0)
{
<span class="LetAgreed">
<p>FOR SALE</p>
</span>
}
#if (prop.isLetAgreed == 3)
{
<span class="LetAgreed" style="left:20px;">
<p>NOW SOLD SSTC</p>
</span>
}
#if (prop.isLetAgreed == 2)
{
<span class="LetAgreed">
<p>NOW SOLD</p>
</span>
}
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-eye fa-3x"></i>
</div>
</div>
<img src="#prop.photo" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>#Html.Raw(propertyNameNew)</h4>
<div class="property-features">
<span><i class="fa fa-gbp"></i> #prop.price </span>
<span><i class="fa fa-bed"></i> #prop.maxtenants</span>
</div>
</div>
</div>
}
}
}
This is my current search form, what should I add to make the search button take into account the prop.isLetAgreed == 3 and if a checkbox is checked.
<div class="row search-input-group">
<div class="col-md-6">
<div class="input-group">
<span style="min-width:150px" class="input-group-addon">Bedrooms</span>
<div class="dropdown searchRoomWebApi">
<button class="btn btn-default dropdown-toggle search-dropdownWebApi" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="txt">select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu search-dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">select</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span style="min-width:150px" class="input-group-addon">Maximum Price</span>
<div class="dropdown searchPriceWebApi">
<button class="btn btn-default dropdown-toggle search-dropdownWebApi" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="txt">select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu search-dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">select</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£100000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£200000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£300000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£400000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£500000</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<a id="btnSearchPropertyWebApi" style="width:100%" href="#" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> <span class="txt">Search</span>
</a>
</div>
</div>
I'm trying to hide html element based on Session Value, using razor or js but i can't. I've tried more than one solution, but no result.
First attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li style="#(Session[" UserRole "].Equals("2 ") ? "display:none " : "display:block ")">
اعتماد الملاحظات
</li>
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Second attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session["UserRole"].ToString().Equals("1")) {
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Any suggestion?
Try below logic, it may work for you
<li style="#(Session["UserRole"].ToString() == "2" ? "display:block" : "display:none")">
Just use an if instead of mixing with the element's style:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session[" UserRole "].Equals("2 "))
{
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>
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!
I've a dropdown menu which looks following like this:
<ul>
<li class="dropdown open">
<a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<span class="user-name">Hi Rajendra! <i class="fa fa-angle-down"></i></span>
<img class="img-circle avatar" src="#" alt="" width="40" height="40">
</a>
<ul class="dropdown-menu dropdown-list" role="menu" style="">
<li role="presentation"><i class="fa fa-user"></i>Profile</li>
<li role="presentation"><i class="fa fa-sign-out m-r-xs"></i>Log out</li>
</ul>
</li>
</ul>
Here is a Screenshot.
Problem:
It shows the dropdown list on page load first time without clicking menu, I tried to use visibility: hidden and display: none, it hides the list but not shows again after clicking the menu.
Please help me!!
Help would be appreciated!!
I'm assuming you're using a framework to handle some of this and I believe just removing the class open will make it appear closed to start with:
<ul>
<li class="dropdown">
<a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<span class="user-name">Hi Rajendra! <i class="fa fa-angle-down"></i></span>
<img class="img-circle avatar" src="#" alt="" width="40" height="40">
</a>
<ul class="dropdown-menu dropdown-list" role="menu" style="">
<li role="presentation"><i class="fa fa-user"></i>Profile</li>
<li role="presentation"><i class="fa fa-sign-out m-r-xs"></i>Log out</li>
</ul>
</li>