为了账号安全,请及时绑定邮箱和手机立即绑定

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


正在回答

4 回答

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

在bootstrap之前引入popper.js即可

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


0 回复 有任何疑惑可以回复我~

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

  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 回复 有任何疑惑可以回复我~

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

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


<!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 回复 有任何疑惑可以回复我~

两个地方的class没加

  1. <div class="dropdown">

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

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

0 回复 有任何疑惑可以回复我~
#1

慕UI2890912 提问者

我写的时候有加的,但是复制进来没有了。我又重新加进去了。 麻烦再帮我看一下啦。感谢~
2017-10-17 回复 有任何疑惑可以回复我~
#2

归吾兮 回复 慕UI2890912 提问者

<button class="btn btn-default dropdown-toggle" data-toggle=" dropdown"> 不用谢,这两行放到一行上就好了
2017-10-17 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
bootstrap快速入门
  • 参与学习       100975    人
  • 解答问题       187    个

bootstrap是目前最流行的框架之一,能够带你快速搭建网页!

进入课程

请教 dropdown 下拉出不来

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信