Question

我正在Bootstrap 4中工作，并且创建了一个“模态”对话框。我希望“模态”对话框上的最后一个链接是一个下拉菜单，但我似乎无法使代码正确。

我的HTML，CSS和JQuery代码可以在JSFiddle中找到：

<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" 
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="tabbable">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link active" href="#AAA" data-toggle="tab">
                                AAA
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#BBB" data-toggle="tab">
                                BBB
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#CCC" data-toggle="tab">
                                CCC
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="DDL" href="#DDL">
                        Menu
                      </a>
                      <ul class="dropdown-menu">
                            <li>
                           <a class="dropdown-item" href="#News">
                              News
                           </a>
                      </li>
                    </ul>
                </div>       
            </div>
        </div>
    </div>
</div>

Answer 1

您不希望将href="..."设置为不存在的元素（#DDL）。只需将其删除，它将找到下一个dropdown-menu。

       <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="">
                    Menu
                  </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#News">
                          News
                       </a>
                        </li>
                    </ul>
       </li>

https://www.codeply.com/go/nbXb8ipmxl

Bootstrap 4-带选项卡的模式对话框-下拉菜单

1 个答案: