我正在使用twitter引导程序,并试图通过单击菜单项打开模式弹出窗口。这是我的代码:
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<ul class="nav pull-right">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
<ul class="dropdown-menu">
<li class="active"><a href="">Some item 1</a></li>
<li class=""><a href="">Some item 2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#myModal" class="dropdown-toggle" data-toggle="modal">
Contacts</a></li>
</ul>
</div>
<!-- /.navbar-inner -->
</div>
还有我的模式窗口:
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Modal header</h3>
</div>
<div class="modal-body">
<p>
One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
第一个菜单项具有下拉数据切换。第二个菜单项具有模式数据切换。当我点击第一个项目时,它看起来就像被点击了一样,并改变了自己的颜色。当我点击第二个(联系人)菜单项时,该菜单项的颜色保持不变。我为"联系人"li元素添加了onclick事件:
onclick="$(this).addClass('modal-open-li');"
我正在编写自己的modal-open-li
类来点击这个元素。但是,当我关闭模式弹出窗口时,如何返回li
元素的颜色?此外,我可以为同一个li
元素(如data-toggle="modal dropdown"
)添加多个数据切换吗?
如果我理解正确,你想在模态关闭时将类删除到链接中,这样你就可以绑定到模型"隐藏"事件,试着添加以下JavaScript代码:
$('#myModal').on('hide',function(){
$('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});
关于为一个元素添加多个数据切换,我不知道这是否可能,但我建议不要这样做,因为你真的需要同时切换下拉列表和打开模态吗?我认为有更好的方法来改进用户体验