问答详情
源自：5-4 下拉菜单

请教 dropdown 下拉出不来

照着老师的做下来的 不知道哪里有问题。求大神帮我看下




<!doctype html>

<html>

     <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

     <link rel="stylesheet" href="./css/bootstrap.min.css">

      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

     <script src="./js/bootstrap.min.js"></script>  

     <title>dropdown</title>

     </head>

    

     <body>

<div>

<button class="btn btn-default dropdown-toggle" data-toggle="

    dropdown">

     这是按钮

     <span></span>

    </button>

        <ul>

         <li>

            <a href="#">链接</a>

            </li>

            <li>

            <a href="#">链接</a>

            </li>

            <li>

            <a href="#">链接</a>

            </li>

        </ul>      

</div>

     </body>

    </html>


提问者：慕UI2890912 2017-10-16 17:17

个回答

  • Jodel
    2020-07-18 14:10:43

    看看控制台是不是报错缺少popper.js？

    在bootstrap之前引入popper.js即可

    <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>


    0
  • 慕侠2155777
    2018-12-29 14:42:04

    这个主要就用到两个类名加一个事件

    1. 最外侧一个包裹的div加上dropdown类（元素1和元素2是div的子类）

    2. 元素1（按钮）：button按钮上绑定data-toggle = "dropdown"事件（此处不一定是button ，a标签也行，但是保证在是带有dropdown类的div的子元素）

    3. 元素2（列表）：下拉列表，一般是用ul+li设置，但是这个元素也就是ul标签要带有dropdown-menu类。你也可以用<p class="dropdown-menu"><a>11</a><br/><a>11</a><br/><a>11</a><br/></p>来写，看你个人爱好

    4. 至于button上的dropdown-toggle类，这个只是一个样式显示，不影响效果的生成。

    0
  • 慕UI2890912
    2017-10-17 10:12:53

    我写的时候有加的，但是复制进来没有了。我又重新加进去了。

    麻烦再帮我看一下啦。感谢~


    <!doctype html>

    <html>

         <head>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

         <link rel="stylesheet" href="./css/bootstrap.min.css">

          <script src="./js/jquery-3.2.1.js"></script>

         <script src="./js/bootstrap.min.js"></script>  

         <title>dropdown</title>

         </head>

        

         <body>

    <div  class="dropdown">

    <button class="btn btn-default dropdown-toggle" data-toggle="

        dropdown">

         这是按钮

         <span  class="caret"></span>

        </button>

            <ul  class="dropdown-menu">

             <li>

                <a href="#">链接</a>

                </li>

                <li>

                <a href="#">链接</a>

                </li>

                <li>

                <a href="#">链接</a>

                </li>

            </ul>      

    </div>

         </body>

        </html>


    0
  • 归吾兮
    2017-10-17 00:23:52

    两个地方的class没加

    1. <div class="dropdown">

    2.  <ul class="dropdown-menu">

    另，只加第二个class，ul列表会显示在屏幕下方

    0