文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >自定义超级菜单问题

问自定义超级菜单问题
EN

Stack Overflow用户
提问于 2017-08-23 08:33:46
回答 1查看 1.1K关注 0票数 1

我已经包括了我的网站上的超级菜单，使用Bootstrap，Javascript，PHP和CSS。

当前，底部有一些选项卡可以更改我在菜单中查看的列表.男人，女人，孩子和体育。

为了从一个选项卡更改为下一个选项卡，我需要点击链接。

我想改变它从点击到悬停/鼠标，并从底部移动，所以它是在侧面类似于在它自己的专栏。

我也有一个问题，当前当我悬停在下拉菜单上时，下拉选项卡的背景会从蓝色变为棕色。当我离开下拉列表时，背景会变回蓝色。但是，如果我打开超级菜单下拉菜单，然后单击菜单中的一个子选项卡来更改显示的产品，则下拉背景将保持不断的浏览，就好像菜单一直处于活动状态一样，即使我悬停在主导航栏上的另一个下拉菜单上。

如果有人能在这些问题上有所帮助，那就太好了。

我已经将代码包括如下。(到目前为止，上面链接上的内容的确切副本)

​

代码语言：javascript
复制
$(document).ready(function() {
  $(".dropdown").hover(
    function() {
      $('.dropdown-menu', this).stop(true, true).slideDown("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('.dropdown-menu', this).stop(true, true).slideUp("fast");
      $(this).toggleClass('open');
    }
  );
});
代码语言：javascript
复制
.navbar-brand {
  width: 70px;
  height: 50px;
  background: url('http://www.sneakermission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
  background-size: 50px;
}

.nav-tabs {
  display: inline-block;
  border-bottom: none;
  padding-top: 15px;
  font-weight: bold;
}

.nav-tabs>li>a,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  border: none;
  border-radius: 0;
}

.nav-list {
  border-bottom: 1px solid #eee;
}

.nav-list>li {
  padding: 20px 15px 15px;
  border-left: 1px solid #eee;
}

.nav-list>li:last-child {
  border-right: 1px solid #eee;
}

.nav-list>li>a:hover {
  text-decoration: none;
}

.nav-list>li>a>span {
  display: block;
  font-weight: bold;
  text-transform: uppercase;
}

.mega-dropdown {
  position: static !important;
}

.mega-dropdown-menu {
  padding: 20px 15px 15px;
  text-align: center;
  width: 100%;
}
代码语言：javascript
复制
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown mega-dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <div class="dropdown-menu mega-dropdown-menu">
                <div class="container-fluid">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div class="tab-pane active" id="men">
                      <ul class="nav-list list-inline">
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a>
                        </li>
                      </ul>
                    </div>
                    <div class="tab-pane" id="women">
                      <ul class="nav-list list-inline">
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a>
                        </li>
                      </ul>
                    </div>
                    <div class="tab-pane" id="kids">
                      <ul class="nav-list list-inline">
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a>
                        </li>
                      </ul>
                    </div>
                    <div class="tab-pane" id="sports">
                      <ul class="nav-list list-inline">
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a>
                        </li>
                        <li>
                          <a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                  <li class="active"><a href="#men" role="tab" data-toggle="tab">Men</a></li>
                  <li><a href="#women" role="tab" data-toggle="tab">Women</a></li>
                  <li><a href="#kids" role="tab" data-toggle="tab">Kids</a></li>
                  <li><a href="#sports" role="tab" data-toggle="tab">Sports</a></li>
                </ul>
              </div>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
</body>
</html>

​

bootstrap-modal
megamenu
javascript
css
EN

回答 1

Stack Overflow用户

发布于 2017-08-23 09:23:54

我运行了您的代码片段，得到了两个错误：

代码语言：javascript
复制
{
  "message": "Uncaught SyntaxError: Unexpected token <",
  "filename": "https://stacksnippets.net/js",
  "lineno": 221,
  "colno": 1
}
{
  "message": "Uncaught Error: Bootstrap's JavaScript requires jQuery",
  "filename": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
  "lineno": 6,
  "colno": 31
}

您需要将库JavaScript和库CSS包含在HTML的顶部(我已经编辑了这个问题以反映这一点)：

代码语言：javascript
复制
    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>

为了从一个选项卡更改为下一个选项卡，我需要点击链接。我想把它从点击改为悬停/鼠标切换。

链接的默认行为是可点击的。如果您希望事件是鼠标覆盖而不是单击，请将其更改为<li> (移除<a>)并添加一个悬停事件。

从可用性的角度来看，我会将它们保留为单击事件。当我将鼠标移到某物上时，我想要预览它所做的事情(例如，悬停事件应该是在浏览器左下角显示工具提示或查看链接目标的URL )，我不希望它在单击它之前实际执行该操作。

也从底部移开，就像在它自己的专栏里一样。

很难想象你说的是什么意思，因为你的整个造型在片段中是看不见的。

我也有一个问题，当前当我悬停在下拉菜单上时，下拉选项卡的背景会从蓝色变为棕色。当我离开下拉列表时，背景会变回蓝色。但是，如果我打开超级菜单下拉菜单，然后单击菜单中的一个子选项卡来更改显示的产品，则下拉背景将保持不断的浏览，就好像菜单一直处于活动状态一样，即使我悬停在主导航栏上的另一个下拉菜单上。

在CSS中，确保背景颜色应用于<div>的所有状态，而不仅仅是悬停状态。如果<div>嵌套在<li>中，它将继承<li>的属性。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45834622

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档