jQuery幻灯片菜单出现在主菜单下 [英] jQuery slide menu appearing below main menu

问题描述

使用下面的代码，我创建了一个包含< image> 的固定< header> 和一个<导航> 。现在我想添加子菜单到< navigation> ，就像你在< button> 和< SlideItem> 部分。

幻灯片功能目前效果很好。但是，它确实出现在主菜单的旁边，而不是在其下面。看起来好像它卡在按钮的< li> 中。

我必须改变什么在我的代码中，所以子菜单出现在主菜单下面？

$ b

body {margin：0;}。身高：10％;余量：10％;显示：flex; justify-content：space-between;位置：固定; top：0;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：yellow;}。image {width：30％;身高：100％;显示：flex; justify-content：center;文本对齐：中心; align-items：center;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：green;}。navigation {width：70％;身高：100％;盒子尺寸：边框; border-style：solid; border-width：1px;} ul {height：100％;显示：flex; list-style：none;保证金：0;填充：0;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：blue;} li {width：100％;显示：flex; justify-content：center;文本对齐：中心; align-items：center;盒子尺寸：边框; border-style：solid; border-width：1px;}。content {width：80％;保证金率：10％;余量：10％;盒子尺寸：边框; border-style：solid; border-width：1px;背景颜色：红色;}。SlideItem {display：none;}。SlideItem {box-sizing：border-box; border-style：solid; border-width：1px; < script src =};} https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script><div class =header> < div class =image>图片< / div> < nav class =navigation> < UL> < li class =button> 1.0主菜单< ul class =SlideItem> <李> 1.1子菜单< / li> <李> 1.2子菜单< / li> <李> 1.3子菜单< / li> < / UL> < /锂> <李> 2.0主菜单< / li> <李> 3.0主菜单< / li> < / UL> < / nav>< / div>

您也可以找到我的代码此处。

解决方案使用位置：绝对放在 SlideItem 相对于直接父项，并避免使用直接在元素上的CSS例如你已经使用 ul {height：100％; display：flex; ...} 它会将css应用于所有 ul 元素，更好的方法是使用类或继承。

body {margin：0;}。header {width：80％;身高：10％;余量：10％;显示：flex; justify-content：space-between;位置：固定; top：0;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：yellow;}。image {width：30％;身高：100％;显示：flex; justify-content：center; text-align：center; align-items：center;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：green;}。navigation {width：70％;身高：100％;盒子尺寸：边框; border-style：solid; border-width：1px;}。navigation> ul {height：100％;显示：flex; list-style：none;保证金：0;填充：0;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：blue;}。navigation> ul> li {width：100％;显示：flex; justify-content：center; text-align：center; align-items：center;盒子尺寸：边框; border-style：solid; border-width：1px;}。content {width：80％;保证金率：10％;余量：10％;盒子尺寸：边框; border-style：solid; border-width：1px; background-color：red;}。button {position：relative;}。SlideItem {display：none;盒子尺寸：边框; border-style：solid; border-width：1px;背景颜色：石灰;位置：绝对的;顶部：100％;左：0;填充：0; margin：0;}。SlideItem li {display：block;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< div class =header> ; < div class =image>图片< / div> < nav class =navigation> < UL> < li class =button> 1.0主菜单< ul class =SlideItem> <李> 1.1子菜单< / li> <李> 1.1子菜单< / li> <李> 1.1子菜单< / li> < / UL> < /锂> <李> 2.0主菜单< / li> <李> 3.0主菜单< / li> < / UL> < / nav>< / div>

With the code below I have created a fixed <header> consisting of an <image> and a <navigation>. Now I want to add sub-menus to the <navigation> as you can see in the <button> and <SlideItem> part.

The slide function works perfectly so far. However, it does appear right next to the main menu and not below it. It seems like that it stuck inside the <li> of the button.

What do I have to change in my code so the sub-menus appear below the main menu?

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%; 
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align:center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align:center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content{
  width: 80%;
  margin-top: 10%; 
  margin-left: 10%; 
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: none;
}

.SlideItem {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">	
  <div class="image">
  Image
  </div>
  <nav class="navigation"> 
    <ul>
      <li class="button"> 1.0 Main Menu 
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
          <li> 1.3 Sub Menu </li>     
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

You can also find my code here.

解决方案

Use position:absolute on SlideItem relative to immediate parent, and avoid to use css on elements directly e.g. you have used ul { height: 100%;display:flex; ... } it will apply css to all ul elements, better way is to use class or inheritance.

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation > ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation > ul > li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}
.button{
  position:relative;
}
.SlideItem {
  display: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
  margin:0;
}
.SlideItem li{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
    Image
  </div>

  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>

</div>

这篇关于jQuery幻灯片菜单出现在主菜单下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！