Twitterbootstrap 下拉菜单，打开模态窗口。

Question

尝试让下拉按钮打开，然后在下拉菜单中单击项目时应该打开模态框 - 但不起作用，已添加以下代码：

<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>

我可能做错了什么事情，但如果有人能帮忙，我会很高兴，谢谢！

- Bernie

---

首先，您发布的HTML无效。您没有关闭ul和几个div元素。除此之外，您没有正确设置data-*和id值。 - DavidG

我已经关闭了它们，但没有复制它们。好的！ - Bernie

Answer 1

在使用下拉菜单时，需要为 button 和下拉菜单创建一个包装器 .dropdown，而对于模态框，你需要在链接中添加属性 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

- anpsmn

---

谢谢，它起作用了！但是我把按钮放在一个按钮组中，但它们不再分组了。 - Bernie

@Bernie 哦，那么你可以移除那个下拉包装器像这样。 - anpsmn