gpt4 book ai didi

twitter-bootstrap - Twitter Bootstrap 下拉菜单,打开模式

转载 作者:行者123 更新时间:2023-12-04 23:20:23 25 4
gpt4 key购买 nike

试图打开一个下拉按钮,然后单击下拉列表中的一个项目时,它应该打开一个模式 - 但不起作用,添加了以下代码:

<button type="button" class="btn btn-lg btn-warning dropdown-toggle" data-toggle="dropdown">By industries <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#consumergoods">Consumer goods</a></li>

<div class="modal fade" id="consumergoods" data-target="#consumergoods">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><strong></strong>Consumer goods</h4>
</div>

可能做错了什么,但如果有人可以提供帮助,我会很高兴,谢谢!

最佳答案

你需要有一个包装 div .dropdown对于button<ul>为了使下拉菜单和模态框起作用,您需要提供属性 data-toggle="modal"到链接

<div class="dropdown">
<button type="button" class="btn btn-lg btn-warning dropdown-toggle" data-toggle="dropdown">By industries <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#consumergoods" data-toggle="modal">Consumer goods</a></li>
</ul>
</div>
<div class="modal fade" id="consumergoods" data-target="#consumergoods">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title"><strong></strong>Consumer goods</h4>
</div>
</div>
</div>
</div>

Fiddle

关于twitter-bootstrap - Twitter Bootstrap 下拉菜单,打开模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28720843/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com