我如何在不影响布局的情况下将链接放在选项1,选项2等
How do I put a link in option 1, option 2, etc without affecting the layout?
在Bootstrap 3.0模板中使用。
在我尝试将链接放入选项部分之前,代码工作得很好。
当我尝试<li><a href="">Option 1</a></li>
时,显示回到基本,帮助吗?
<a class="btn btn-default btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select Workshop</span>
<span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</a>
Javascript代码:
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
$(".btn-select").removeClass("active").find("ul").hide();
}
});
嵌套链接是非法的
<a>
元素定义的链接和锚不能嵌套;锚元素不能包含任何其他锚元素。
当你在选项中添加链接时,你也在尝试做同样的事情。这不是正确的方法
使用
<div class="btn btn-default btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select Workshop</span>
<span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</div>
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 在新选项卡中打开链接,但不使用_blank方法
- 打开选项卡中的链接
- JQuery-停止手风琴链接关闭所有选项卡
- 文本链接可更改引导程序选项卡
- <中的链接;选择>下拉选项
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何在新选项卡中打开链接以及在当前选项卡中重定向
- 表单上预先选择的选项取决于您的链接'We’’’’来自
- 如何超链接在新选项卡中打开并携带一些变量的选择标记
- 如何防止iframe中的链接在新选项卡中打开
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 打开除域之外在新选项卡中打开的所有外部链接
- 单击链接时添加另一个选项
- 如何使用角度材质应用选项卡链接波纹
- 谷歌地图点击链接/选项卡更改标记位置地图
- 如何在分页期间链接回特定的jquery ui选项卡
- 选项卡中的a href链接没有执行任何操作
- 提交表单的可能性(左-/中-/在新选项卡或窗口中打开-)单击html链接