Bootstrap下拉菜单-仅复选框不选择文本
Bootstrap dropdown menu - only checkbox selects not text
我有一个引导程序下拉菜单。当你点击它时,它会突出显示我的webgl地图中的某些建筑,这取决于它们的特定类别(例如博物馆或电影院)。
目前,点击复选框是有效的。但同时点击它旁边的文字会突出显示该建筑。这很好,但如果你点击文本,它不会勾选复选框,所以建筑物会高亮显示,但复选框不会勾选。这让用户感到困惑。
我试过给文本设置无指针事件,但这似乎不起作用。
网站:explorecanterbury.co.uk(下拉菜单是导航上的第一个图标)
<nav class="navbar navbar-default" style="z-index:5;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg>
</li>
<ul class="dropdown-menu">
<li><a id="alltoggle" class="small toggle" data-value="option2" tabIndex="-1"><input type="checkbox"/> Show All</a></li>
<li><a id="mgtoggle" class="small toggle" data-value="option3" tabIndex="-1"><input class="uncheck" type="checkbox"/> Museums and Galleries</a></li>
<li><a id="landmarktoggle" class="small toggle" data-value="option4" tabIndex="-1"><input class="uncheck" type="checkbox"/> Landmarks</a></li>
<li><a id="shoppingtoggle" class="small toggle" data-value="option5" tabIndex="-1"><input class="uncheck" type="checkbox"/> Shopping</a></li>
<li><a id="hotelstoggle" class="small toggle" data-value="option6" tabIndex="-1"><input class="uncheck" type="checkbox"/> Hotels + Bed & Breakfast</a></li>
<li><a id="churchestoggle" class="small toggle uncheck" data-value="option7" tabIndex="-1"><input class="uncheck" type="checkbox"/> Churches</a></li>
<li><a id="cinematoggle" class="small toggle uncheck" data-value="option8" tabIndex="-1"><input class="uncheck" type="checkbox"/> Cinemas</a></li>
</ul>
<li class="icon_display"><svg></li>
<li class="icon_display"><svg></li>
</ul>
<div class="searchBar">
<div class="input-group" style="padding-left: 10px;">
<input type="text" class="form-control ui-autocomplete-input" placeholder="Search" id="srch-term" autocomplete="off">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
<svg>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
您将想要使用label元素。将文本包围在标签元素中,并为输入元素指定id。然后将标签元素的for
设置为输入的id。
Ex。
<a id="alltoggle" class="small toggle" data-value="option2" tabIndex="-1">
<input type="checkbox" id="show-all"/>
<label for="show-all"> Show All</label>
</a>
相关文章:
- 用于选择/文本框操作的JavaScript
- 以编程方式选择文本Mobile Safari
- Firefox输入可以't在选择文本时滚动
- 如何在javascript中取消选择文本框
- 如何在html中打印选择文本
- SVG元素——处理和选择文本
- 选择文本并添加到本地存储
- 选择“p文本jquery”
- 为什么火狐在我更改 innerHTML 时会选择文本
- 根据换行符选择文本
- 如何按从当前单词到段落中该句子(.)结尾的范围选择文本
- 单击按钮时选择文本
- JavaScript 触发器事件在 Android 上选择文本
- .val() 选择文本而不是值字符串,当网页动态编辑源 html
- 为什么不用特殊字符替换选择文本,以及如何删除此特殊字符
- 使用链接多次选择文本
- 使用jQuery在焦点上选择文本框是't在移动浏览器中工作
- Safari存在文本输入问题,用户输入时会选择文本,导致文本丢失
- Bootstrap下拉菜单-仅复选框不选择文本
- 使用.on的多个下拉菜单选择文本仅适用于第一个下拉菜单