当前位置:首页 > 开发 > Web前端 > 前端 > 正文

bootstrap源码学习与示例:bootstrap-dropdown(转帖)

发表于: 2015-04-21   作者:BreakingBad   来源:转载   浏览:
摘要: bootstrap-dropdown组件是个烂东西,我读后的整体感觉。 一个下拉开菜单的设计: <ul class="nav pull-right"> <li id="fat-menu" class="dropdown">

bootstrap-dropdown组件是个烂东西,我读后的整体感觉。

一个下拉开菜单的设计:

                  <ul class="nav pull-right">
                        <li id="fat-menu" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
                            <ul class="dropdown-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>
                        </li>
                    </ul>

首先下拉开菜单其中就是当中第二层的UL元素,类名为dropdown-menu。下拉菜单通常处于隐藏状态。我们可以在它的父元素上加个open类名,让它显示出来。它的父元素通常带个dropdown类名,其实是提供了一个相对定位的包含块。当然除了dropdown外,你还可以选择用dropup。dropdown是让下拉菜单向下显示,dropup是向上展示。要打开下拉菜单,通常我们要点击某处让它显示出来。我们称之为触发器。这个触发器带一个data-toggle=dropdown的自定义属性。通过前面的学习,你们应该隐约察觉到,data-toggle在bootstrap有特殊意义,是让目标对象表现某一类控件,什么data-toggle=button,data-toggle=buttons-checked,data-toggle=radio……不过它还有专门的类名dropdown-toggle。触发器可以通过data-target自定义属性指定目标下拉框打开,也可以通过href属性打开。不过bootstrap的下拉框有严重的排它性,一个页面只能打开一个下拉框,也无法通过套嵌组建多级下拉框。

ps:判断是否隐藏:

        if($("#subEarlySettlementCostValue").is(":hidden")){

            $("#subEarlySettlementCostValue").show();

        }else if($("#subEarlySettlementCostValue").is(":visible")){

            $("#subEarlySettlementCostValue").hide();

        }

 

bootstrap源码学习与示例:bootstrap-dropdown(转帖)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
invoke调用,scheme机制, 1250ps--800MHZ, 1875ps--533.33MHZ 作者非常的幽默,关于DDR3共有下面几
前言 大家好!这个系列文章是按转自网友阿捷编写的。之前阿捷也一直没有制作过一个真正符合web标准
[转帖]XML轻松学习手册 转载自: http://www.knowsky.com/2991.html XML轻松学习手册(1)XML快速入
原文地址:http://yangw80.blog.163.com/blog/static/247518002201552692516908/ 在开源项目满天飞
UML示例图 在Visio里,包和类的关系是包含关系,将类拖入包的文件夹之后,关系就建立了,二元关联符
根据自己的认识,对于软件开发进行了分类,方便理清自己的思路。 而web前端开发就是软件开发的网站
地址:http://www.xue163.com/34/1220/340534.html http://www.chinaz.com/web/2015/0413/398221.sh
注 :该文章参考了如下内容 : A)kernel-HOWTO B)Module-HOWTO C)man 手册 D)CU : RedHat Linux
转载于:[转帖]一个华为哥们学习&开发GSM的一些事 http://bbs.c114.net/thread-569654-1-1.html 我
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号