javascript - bootstrap mega 菜单，如何更改为 onclick 功能并为移动设备下拉元素？-6ren

javascript - bootstrap mega 菜单，如何更改为 onclick 功能并为移动设备下拉元素？

转载作者：行者123 更新时间：2023-11-28 16:21:42

我正在尝试为小型设备更改“onclick”菜单下拉菜单，为 item1 和 item2 更改“下拉菜单”，问题是下拉菜单子(monad)在移动设备的根导航之外？

如何更改内部根导航和点击移动设备中的下拉菜单子(monad)？

来源自http://jsfiddle.net/apougher/ydcMQ/

我的编辑::

HTML:

<body>

        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="logo.jpg" alt="Dispute Bills"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">home</a></li>
                        <li class="dropdown menu-large ">
                <a href="# " class="dropdown-toggle " data-toggle="dropdown ">item 1<b class="caret "></b></a>              
                <ul class="dropdown-menu megamenu row">
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Glyphicons</li>
                            <li><a href="# ">Available glyphs</a></li>
                            <li class="disabled "><a href="# ">How to use</a></li>
                            <li><a href="# ">Examples</a></li>
                            <li class="divider "></li>
                            <li class="dropdown-header ">Dropdowns</li>
                            <li><a href="# ">Example</a></li>
                            <li><a href="# ">Aligninment options</a></li>
                            <li><a href="# ">Headers</a></li>
                            <li><a href="# ">Disabled menu items</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Button groups</li>
                            <li><a href="# ">Basic example</a></li>
                            <li><a href="# ">Button toolbar</a></li>
                            <li><a href="# ">Sizing</a></li>
                            <li><a href="# ">Nesting</a></li>
                            <li><a href="# ">Vertical variation</a></li>
                            <li class="divider "></li>
                            <li class="dropdown-header ">Button dropdowns</li>
                            <li><a href="# ">Single button dropdowns</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Input groups</li>
                            <li><a href="# ">Basic example</a></li>
                            <li><a href="# ">Sizing</a></li>
                            <li><a href="# ">Checkboxes and radio addons</a></li>
                            <li class="divider "></li>
                            <li class="dropdown-header ">Navs</li>
                            <li><a href="# ">Tabs</a></li>
                            <li><a href="# ">Pills</a></li>
                            <li><a href="# ">Justified</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Navbar</li>
                            <li><a href="# ">Default navbar</a></li>
                            <li><a href="# ">Buttons</a></li>
                            <li><a href="# ">Text</a></li>
                            <li><a href="# ">Non-nav links</a></li>
                            <li><a href="# ">Component alignment</a></li>
                            <li><a href="# ">Fixed to top</a></li>
                            <li><a href="# ">Fixed to bottom</a></li>
                            <li><a href="# ">Static top</a></li>
                            <li><a href="# ">Inverted navbar</a></li>
                        </ul>
                    </li>
                </ul>

            </li>

            <li class="dropdown menu-large ">
                <a href="# " class="dropdown-toggle " data-toggle="dropdown ">item 2 <b class="caret "></b></a>             
                <ul class="dropdown-menu megamenu row ">
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Glyphicons</li>
                            <li><a href="# ">Available glyphs</a></li>
                            <li class="disabled "><a href="# ">How to use</a></li>
                            <li><a href="# ">Examples</a></li>
                            <li class="divider "></li>
                            <li class="dropdown-header ">Dropdowns</li>
                            <li><a href="# ">Example</a></li>
                            <li><a href="# ">Aligninment options</a></li>
                            <li><a href="# ">Headers</a></li>
                            <li><a href="# ">Disabled menu items</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Button groups</li>
                            <li><a href="# ">Basic example</a></li>
                            <li><a href="# ">Button toolbar</a></li>
                            <li><a href="# ">Sizing</a></li>
                            <li><a href="# ">Nesting</a></li>
                            <li><a href="# ">Vertical variation</a></li>
                            <li class="divider "></li>
                            <li class="dropdown-header ">Button dropdowns</li>
                            <li><a href="# ">Single button dropdowns</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Input groups</li>
                            <li><a href="# ">Basic example</a></li>
                            <li><a href="# ">Sizing</a></li>
                            <li><a href="# ">Checkboxes and radio addons</a></li>
                            <li class="divider "></li>
                            <li class="dropdown-header ">Navs</li>
                            <li><a href="# ">Tabs</a></li>
                            <li><a href="# ">Pills</a></li>
                            <li><a href="# ">Justified</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-3 ">
                        <ul>
                            <li class="dropdown-header ">Navbar</li>
                            <li><a href="# ">Default navbar</a></li>
                            <li><a href="# ">Buttons</a></li>
                            <li><a href="# ">Text</a></li>
                            <li><a href="# ">Non-nav links</a></li>
                            <li><a href="# ">Component alignment</a></li>
                            <li><a href="# ">Fixed to top</a></li>
                            <li><a href="# ">Fixed to bottom</a></li>
                            <li><a href="# ">Static top</a></li>
                            <li><a href="# ">Inverted navbar</a></li>
                        </ul>
                    </li>
                </ul>

            </li>
        </ul>
        </div>
      </div>
    </nav>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js "></script>
    <script>
// Dropdown Menu Fade    
jQuery(document).ready(function(){
    $(".dropdown ").hover(
        function() { $('.dropdown-menu', this).stop().fadeIn("fast ");
        },
        function() { $('.dropdown-menu', this).stop().fadeOut("fast ");
    });
});
    </script>
</body>

CSS:

.navbar-brand {
    padding: 0px;
}

.navbar-brand>img {
    height: 100%;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
    padding-bottom: 6px;
    width: auto;
}


/* This should be around line 4713 in your bootstrap.css */

.navbar-collapse.collapse {
    text-align: center;
}

.navbar-nav {
    display: inline-block;
    float: none;
    margin: 0;
    max-width: 1200px;
}

.navbar-default {
    color: #0A0A0A;
    background-color: #FFFCFC;
    border-color: rgba(208, 174, 174, 1.00);
}

.navbar-default .navbar-nav > li > a {
    color: #030303;
    padding-left: 30px;
    padding-right: 30px;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #7C7373;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #666666;
    border-bottom-color: #111222;
}

.menu-large {
    position: static !important;
}

.megamenu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
    float: none;
}

.megamenu> li > ul {
    padding: 0;
}

.megamenu> li > ul > li {
    list-style: none;
}

.megamenu> li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: normal;
    font-size: 80%;
    text-align: left;
}

.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
    text-decoration: none;
    color: #AB2F2F;
    background-color: #EFE7E7;
}

.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
    color: #9A5455;
}

.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    cursor: not-allowed;
}

.dropdown-header {
    color: #1D5586;
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .navbar-default .navbar-nav > li > a {
        color: #030303;
        padding-right: 1px;
        padding-left: 1px;
    }
    .navbar-collapse.collapse {
        text-align: left;
        /* Set this */
    }
    .megamenu {
        margin-left: 0;
        margin-right: 0;
    }
    .megamenu> li {
        margin-bottom: 30px;
    }
    .megamenu> li:last-child {
        margin-bottom: 0;
    }
    .megamenu.dropdown-header {
        padding: 3px 15px !important;
    }
    .navbar-nav .open .dropdown-menu .dropdown-header {
        color: #fff;
    }
}

我的代码:FIDDLE

最佳答案

你需要修改一些css

.navbar-default .navbar-nav > .open > a{
  background : transparent !important;
 }

.navbar-nav .open .dropdown-menu{
  background : white;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
  color : #999999 !important;
}

这是更新的 jsFiddle

关于javascript - bootstrap mega 菜单，如何更改为 onclick 功能并为移动设备下拉元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36723779/

文章推荐： javascript - 更改值时防止 slider 跳跃

文章推荐： Javascript:数组精确匹配

文章推荐： python - 从 Python C API 中的字符串导入模块

文章推荐： css - 悬停不起作用

详解dedecms后台编辑器将回车改为的方法
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章详解dedecms后台编辑器将回车改为的方法由作者收集整理，如果你对
javascript - 如何将改为
？
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 6 年前。 Improve th
javascript - 改为 JS 文件中的谷歌分析？
不是将代码放在正文的头部或末尾(我把它放在正文的末尾)，如果我将代码放在 JS 文件中而不是在 html 中它自己的脚本标记，是否可以？ (我假设它像任何其他代码一样工作正常，但我问以防万一) 最佳答
postgresql - PSQL 命令行结束从 => 改为 (>
我尝试执行从\e 命令编写的查询，但现在我无法执行任何查询，但可以在 PSQL 中执行命令。现在我注意到这一点，我输入的命令现在在\e 中。当我关闭\e(尝试运行它)时问题开始了。最佳答案 ps
Java字符串替换(去掉换行符，将$改为\$)
我有一个这样的字符串($ 字符总是被其他字符包围): a$b c$d e$f 我希望我的字符串方法在 $ 前面放置一个 \ 并删除换行符: a\$bc\$de\$f 我试过了，但它没有放入 \ 字符:
java - 如何防止Java将XML文件中的 "&"改为 "&"
我需要使用 Java 构建一个 XML 文件。问题是我必须使用一些特殊字符，例如“ć”，然后在我的移动应用程序中读取它。如果我手动更改 ć 就可以正常工作至 ć在我的 XML 文件中的记事
javascript - 将改为 useMutation
我有一个removeUser 页面，我在其中使用，然后使用submitForm() 函数进行错误处理。这段代码运行得非常好: export default function RemoveUserPag
mysql - SQL查询将前面两个数字从 "2048"改为 "1948"
我在数据库 “2048-05-21” 中有一个看起来像这样的日期我只想得到年份，在这一年我只想得到两个后面的数字并将两个前面的数字更改为19 example: data : 2048-05-21 1
JAVA- 将 111 改为 123
public class Venus1 { public static void main(String args[]) { int[]x={1,2,3};
javascript - 改为 JavaScript 的 array_count_values
我有以下 PHP 脚本，现在我需要在 JavaScript 中做同样的事情。 JavaScript 中是否有类似于 PHP 函数的函数，我已经搜索了好几天但找不到类似的东西？我想做的是计算某个单词在数
c++ - #define 改为 constexpr auto
这个问题在这里已经有了答案: Is it bad practice to specify an array size using a variable instead of `#define` in
android - 如何将列表中的所有复选框 'check' 改为 'check' 单个复选框？
我陷入了一种情况，我必须通过“选中”工具栏中的复选框来“选中”列表中存在的所有复选框。这是创建复选框列表的代码:- itemTpl: 'checked="checked" /> {groupName
python - Python 改为 UTF-8 后出现奇怪的字符
我正在使用Python3。在分析一些网站时，我遇到了一些奇怪的字符并寻找解决方案。我找到了一个，但在找到解决方案之前，我尝试了一些方法，并且知道我无法重置它。当我使用 Jupyter 笔记本将列表 l
unity-game-engine - UnityWebRequest 改为 https
我在 http 下有 unity android app 和 site api 的工作基础设施。最近换了服务器，申请了ssl证书。现在我的 api 在 https 下。在 unity 应用程序中，
unity-game-engine - UnityWebRequest 改为 https
我在 http 下有 unity android app 和 site api 的工作基础设施。最近换了服务器，申请了ssl证书。现在我的 api 在 https 下。在 unity 应用程序中，
ios - objective-C 。 NSString 改为 NSCFNumber
我在 Objective-C 中有一些代码。我想，我收到了 NSString 类型，但是当我尝试将它保存在核心数据中时，我得到了一个 user.clientID = clientID; 错误，例如:
php - 将 Varchar 改为 Time 类型
在表中我有一个名为 CallTime 的字段 (Varchar)。包括晚上8:00、晚上8:40、上午10:00等时间我想将字段类型更改为“时间”并更新时间格式。该怎么做？谢谢最佳答案 UPD
c# - 为什么将 int 改为 long 会加快执行速度？
这个问题在这里已经有了答案: C# - for Loop Freezes at strange intervals (3 个答案) 关闭 6 年前。我试图解决 problem #14 from P
list - 预期为 'collections.Iterable' ，改为 Optional[list]
我今天在 Pycharm 社区版 5.0.3 中收到了这个错误，想知道这是否只是我做错了/没有意识到，或者是 PyCharm lint 问题。重现错误的代码是 mylist = list() # fi
java - 如何在页面上显示实体？改为 [Entity of type ... with id : 1]
我的目标是将数据库中的随机文本显示到网页上。首先，我不知道为什么我的数据没有保存，为什么我得到的是[Entity of type sec.helloweb.HelloMessage with id:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - bootstrap mega 菜单，如何更改为 onclick 功能并为移动设备下拉元素？