精华内容
下载资源
问答
我要提问
  • BootStrap中下拉菜单不显示
    2020-04-29 19:25:33

    问题描述

    使用BootStrap3.3.7时，按钮下拉菜单点击无反应，但是导航栏的下拉菜单点击正常显示。

    解决途径

    在使用BootStrap时一定要注意版本问题，需要引入三大文件：css、jquery、js

    如果你使用的是BootStrap3.3.7，需要引入：

    <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    如果你使用的是BootStrap4以上的版本，需要引入：

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    注意顺序不要改动！

    bootstrap
    更多相关内容

  • BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

     2020-08-31 23:35:06
    最近学到Bootstrap下拉菜单，学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo，写完代码发现运行之后点击按钮没反应，下拉菜单弹不出来，下面给大家分享下解决方案
    收起

  • Bootstrap CSS组件之按钮下拉菜单

     2020-11-29 13:05:52
    按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果，就类似于单击一个button按钮，然后显示隐藏的下拉菜单。 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码，css实现方式主要是设置....
    收起

  • 点击按钮显示下拉式列表菜单的实例

     2021-05-09 06:05:09
    内容索引:C#源码,菜单窗体,下拉列表,窗体特效　好东西要分享给大家才是，这是VSBOX的作品，主要是几个集成到一块的窗体按钮特效，包括点击按钮后激活下列拉列式的菜单等。
    收起

  • CMFCToolBar工具条添加下拉菜单按钮

     热门讨论 2015-03-24 14:37:11
    VS2010，在CMFCToolBar工具条上添加下拉菜单按钮，源码例程，修改时注意在编译前要删除注册表应用程序项~
    收起

  • 按钮下拉菜单

     千次阅读 2021-06-11 15:51:45
    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。...如下所示：按钮下拉菜单按钮下拉菜单项按钮下拉菜单项按钮下拉菜...

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。

    按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：

    按钮下拉菜单

    实现样式代码如下：

    /*查看bootstrap.css文件第3204行～第3223行*/

    .btn-group .dropdown-toggle:active,

    .btn-group.open .dropdown-toggle {

    outline: 0;

    }

    .btn-group > .btn + .dropdown-toggle {

    padding-right: 8px;

    padding-left: 8px;

    }

    .btn-group > .btn-lg + .dropdown-toggle {

    padding-right: 12px;

    padding-left: 12px;

    }

    .btn-group.open .dropdown-toggle {

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    }

    .btn-group.open .dropdown-toggle.btn-link {

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    运行的效果如下：

    13cb410c509f07d60fd04d4ed5306185.png

    收起
    展开全文

  • 纯javascript 下拉按钮菜单插件实现（处理兼容性）

     2016-01-19 14:43:27
    纯javascript 下拉按钮菜单插件实现（处理兼容性）,包含封装兼容性的一些例子，绑定事件，事件源等
    收起

  • C# winform给按钮自定义了右键菜单和自定义菜单栏下拉显示列表和自定义菜单栏下拉显示列表

     2022-03-14 18:01:54
    C# winform给按钮自定义了右键菜单 同时给menuStrip和toolstrip，给它的下拉列表添加自定义的显示列表，用于显示丰富的信息
    收起

  • 按钮下拉式菜单

     2015-01-29 13:35:36
    按钮做的菜单，可以实现展开收缩，样式需要自己修改
    收起

  • MFC对话框上显示带下拉菜单的工具栏

     2017-12-01 11:38:46
    可以显示具有下拉菜单功能的程序，并且菜单为图片按钮。
    收起

  • bootstrap组件之按钮式下拉菜单小结

     2020-08-31 15:11:07
    主要介绍了bootstrap组件之按钮式下拉菜单，包括单按钮下拉菜单，分裂式下拉菜单和向上弹出式菜单，本文给大家介绍的非常详细，需要的朋友参考下吧
    收起

  • Qt简单方法实现下拉列表菜单

     2018-03-03 10:51:53
    通过基本控件QPushButton，QWidget，实现下拉菜单，可以展开多级菜单。
    收起

  • C# 点击按钮显示下拉式列表菜单的实例

     热门讨论 2010-06-21 16:09:20
    C# 点击按钮显示下拉式列表菜单的实例C# 点击按钮显示下拉式列表菜单的实例C# 点击按钮显示下拉式列表菜单的实例C# 点击按钮显示下拉式列表菜单的实例
    收起

  • WPF 带下拉菜单的按钮

     热门讨论 2013-03-07 09:14:36
    WPF 带下拉菜单的按钮 QQ聊天记录菜单按钮可以用
    收起
    wpf

  • Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单

     万次阅读 多人点赞 2020-05-18 14:14:31
    1.图标使用 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> .glyphicon 公共类 .glyphicon-search 相应的图标 aria-hidden="true" 意思是让图标只是显示，辅助...2.下拉菜单 ...

    1.图标使用

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

     .glyphicon 公共类   .glyphicon-search 相应的图标   aria-hidden="true" 意思是让图标只是显示，辅助设备不用读。

    .sr-only 类让其在视觉上表现出隐藏的效果

    部分

    所有图标查询 https://v3.bootcss.com/components/

    2.下拉菜单

    向下弹出

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

    向上弹出

    <div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

    下拉菜单中的标题

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

    分割线

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

    禁用菜单

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

    3. 按钮组

    按钮颜色：btn-default  btn-primary  btn-success  btn-info  btn-warning  btn-danger

    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

    按钮的大小

    <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

    嵌套下拉菜单

    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

    按钮组垂直排列

    <div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

    4.按钮式下拉菜单

    <!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

    5.分裂式按钮下拉菜单

    <!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

    尺寸

    <!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

    向上弹出

    <div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

    在学习过程中自己做一个全ui的demo，多测试多看官方文档上手非常容易。

    收起
    展开全文

  • bootstrap按钮下拉菜单

     千次阅读 2019-06-29 17:56:18
    使用 Bootstrap class 向按钮添加下拉菜单。向按钮添加下拉菜单，只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 基本...

    使用 Bootstrap class 向按钮添加下拉菜单。向按钮添加下拉菜单，只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。

    基本的简单的按钮下拉菜单：

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 基本的按钮下拉菜单</title>
       <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
       <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
       <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="btn-group">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">  默认 <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu">
          <li><a href="#">功能</a></li>
          <li><a href="#">另一个功能</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
       </ul>
    </div>
    <div class="btn-group">
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 原始 <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu">
          <li><a href="#">功能</a></li>
          <li><a href="#">另一个功能</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
       </ul>
    </div>

    </body>
    </html>

    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    分割的按钮下拉菜单

    分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 分割的按钮下拉菜单</title>
       <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
       <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
       <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="btn-group">
       <button type="button" class="btn btn-default">默认</button>
       <button type="button" class="btn btn-default dropdown-toggle"        data-toggle="dropdown">
          <span class="caret"></span>
          <span class="sr-only">切换下拉菜单</span>
       </button>
       <ul class="dropdown-menu" role="menu">
          <li><a href="#">功能</a></li>
          <li><a href="#">另一个功能</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
       </ul>
    </div>
    <div class="btn-group">
       <button type="button" class="btn btn-primary">原始</button>
       <button type="button" class="btn btn-primary dropdown-toggle"        data-toggle="dropdown">
          <span class="caret"></span>
          <span class="sr-only">切换下拉菜单</span>
       </button>
       <ul class="dropdown-menu" role="menu">
          <li><a href="#">功能</a></li>
          <li><a href="#">另一个功能</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
       </ul>
    </div>

    </body>
    </html>
    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------

     

    收起
    展开全文
    bootstrap

  • CSS 下拉菜单

     2021-06-10 16:23:18
    CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。下拉菜单实例实例演示 1文本下拉菜单菜鸟教程www.runoob.com实例演示 2实例演示 3学的不仅是技术，更是梦想！基本下拉菜单当鼠标移动到指定元素上...
    收起

  • QT按钮下拉菜单

     千次阅读 2019-05-20 22:53:20
    QPushButton *statusputton; QMenu *statusmenu; void Dialog::creatpushbotton() { statusputton=new QPushButton(); statusmenu =new QMenu();... QAction *online=new QAction(statusmenu);... QAction *chatme=n...
    收起

  • Qt 按钮菜单如何与按钮右边界对齐，并去掉下拉箭头（源码）

     2018-01-05 14:10:24
    qpushbutton 添加点击菜单后是与按钮左边界对齐的，本程序将其右对齐并去掉下拉箭头。
    收起

  • Element-UI下拉菜单选择后不显示在页面上的解决办法

     千次阅读 2021-01-06 14:26:03
    下拉菜单能显示item.name, 点击选择之后没有显示在选择框里，解决办法很简单，加一个 :label = 'item.name'即可。。。看网上抄来抄去还绑定@change，只需要显示的话哪有那么麻烦。。。
    收起
    vue elementui 前端

  • WPF下拉菜单选项按钮

     千次阅读 2019-07-28 20:51:14
    下拉菜单选项按钮代码： <!--操作菜单:栈式面板--> <!--操作菜单--> <!--操作按钮：HorizontalAlignment自适应--> <!--系统管理--> Tag="1" Content="系统管理" Background="Transparent" ...
    收起

  • MFC实现的自绘按钮、自绘下拉菜单和自绘滑动条

     2016-03-10 17:23:11
    自己实现的MFC自绘按钮、自绘下拉菜单和自绘滑动条的源代码，直接可以编译运行，直接可以拿到自己的项目中使用。点击右键出现下拉菜单，点击音量按钮出现滑动条。每一个按钮都实现了高亮效果和按下的效果。
    收起

  • Bootstrap 下拉菜单和按钮

     千次阅读 2019-01-29 14:10:46
    一、下拉菜单： 用于显示链接列表的可切换、有上下文的菜单  .dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 或者 .dropup 里。  .dropdown-menu 类用于实际下拉菜单的创建。  .dropdown-...
    收起

  • boostrap按钮式下拉菜单动态添加选项并在按钮上显示点击选项

     千次阅读 2017-08-13 08:45:08
    boostrap的按钮式下拉菜单结构如下： Action Action Another action Something else here Separated link 可以清楚的看到选项是在 中，而不是传统的下拉菜单，虽然不能照搬过去的方法，但原理...
    收起
    html

  • Bootstrap4 下拉菜单

     2020-12-14 00:33:39
    下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 实例 Dropdown button Link 1 Link 2 Link 3 实例解析 .dropdown 类用来指定一个下拉菜单。 我们可以使用一个按钮或链接来打开下拉菜单， ...
    收起

  • js点击下拉列表按钮，显示，点击其他地方（包括下拉按钮）隐藏下拉列表

     千次阅读 2019-03-08 14:42:52
    不同之处在于stopPropagation()属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本...
    收起

  • android利用PopupWindow实现点击工具栏弹出下拉菜单

     2018-06-26 17:46:50
    android页面开发中会碰到这种需求：点击页面顶部工具栏某个按钮时需要弹出下拉菜单。该工程利用PopupWindow实现了点击工具栏弹出下拉菜单的功能的主要实现类 .
    收起

  • layui下拉菜单的按钮组

     万次阅读 热门讨论 2019-05-08 17:52:23
    直接用菜单导航改的样式，自己是前端菜鸡，直接用的内嵌样式不介意的可以拿去自己改改 <div class="layui-btn-group" style="float:right;padding:5px 15px 0px 20px;"> <button class="layui-btn layui...
    收起

  • layui下拉菜单的按钮组（数据表格表头版）

     千次阅读 2020-07-11 10:30:50
    layui下拉菜单的按钮组（数据表格表头版） 最近工作中需要使用layui在数据表格的表头工具栏里添加一个下拉按钮组，layui目前还没有开发出相关的功能，所以需要自己手动拼写，在参考了博友们的部分文章后，做了一部分...
    收起
    javascript html jquery 前端

  • Qt为工具栏按钮QToolButton添加下拉菜单

     千次阅读 2021-01-26 17:23:41
    // 为QToolButton设置菜单 toolButton->setMenu(menu); } 本文涉及工程代码： https://gitee.com/bailiyang/cdemo/tree/master/Qt/61QToolButtonMenu/QToolButtonMenu 若对你有帮助，欢迎点赞、收藏、评论，你的...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 114,798
精华内容 45,919
热门标签
关键字：

下拉菜单按钮不显示怎么处理