Question

我在我的网站上添加了一个使用Bootstrap，Javascript，PHP和CSS组成的大型菜单。

目前，底部有标签可以更改我在菜单中查看的列表...男士，女士，儿童和运动。

要从一个标签更改为下一个标签，我需要点击链接。

我想将其从点击更改为悬停/鼠标悬停，并从底部移开，使其位于旁边，就像在自己的列中一样。

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

如果有人可以帮助解决这些问题，那就太棒了。

我已经包含了如下代码。（到目前为止，上面链接上的内容的确切副本）

＆＃13;

        List<Medicine> medicineList = new ArrayList<>();
        ArrayList<String> sub_ingredients = new ArrayList<>();

        for (Ingredient search_ingredient : medicineSearchModel.getIngredientList()) {
            sub_ingredients.add(search_ingredient.getId().toString());
        }
        for (Medicine medicine : medicineRepository.findByTradeNameStartingWithAndManufacturerStartingWith(
                medicineSearchModel.getTradeName(),
                medicineSearchModel.getManufacturer()
        )) {
            ArrayList<String> super_ingredients = new ArrayList<>();
            for (Ingredient medicine_ingredient : medicine.getIngredientList()) {
                super_ingredients.add(medicine_ingredient.getId().toString());
            }
            if (super_ingredients.containsAll(sub_ingredients)) {
                medicineList.add(medicine);
            }
        }
        return medicineList;

＆＃13;

$(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');
    }
  );
});

＆＃13;

.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%;
}

＆＃13;

Answer 1

我运行了您的代码段并遇到了两个错误：

{
  "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
}

您需要在HTML的顶部包含您的库JavaScript和库CSS（我编辑了问题以反映这一点）：

    <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），我不想要它实际做这件事，直到我点击它。

并且也从底部移开，因此它就像在它自己的列中一样。

很难想象出你的意思，因为你的完整样式在代码片段中不可见。

当我将鼠标悬停在下拉菜单上时，我也遇到了问题下拉选项卡的背景颜色从蓝色变为棕色。当我离开下拉列表时，背景变回蓝色。但是，如果我打开mega菜单下拉，然后单击其中一个菜单中的子选项卡可更改显示下拉菜单的产品背景保持不变，就好像菜单一直有效，即使我将鼠标悬停在主导航栏上的不同下拉列表中。

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

自定义大型菜单问题

1 个答案: