带有子菜单的菜单，包括链接、使用 jquery 和 slideToggle 的图像答案

【问题标题】：menu with sub menu including links, images using jquery and slideToggle带有子菜单的菜单，包括链接、使用 jquery 和 slideToggle 的图像
【发布时间】：2014-12-03 03:19:18
【问题描述】：

在我的网站上，我有一个包含 4 个项目的菜单，它们位于一个列表 (ul / li) 中。然后我有4个div。每个 div 包含图像、链接、文本，并且必须为 100% 宽度。

当鼠标悬停在菜单的第一项上时，我想使用 slideToggle 显示第一个 div（因为我希望我的“内容”div 向下滚动）并且当 div 显示时，然后能够在 div 内导航没有 div 再次消失。当鼠标悬停在div里面时，div的SlideToggle返回...

我知道如何使用 click 功能，因为 div 保持打开状态，但我正在寻找使用 slideToggle 的解决方案。

这是我的 HTML：

<ul class="main_menu">
<li>ITEM 1</li> • <li>ITEM 2</li> • <li>ITEM 3</li> • <li>ITEM 4</li>
</ul>

<div id="main_sous_menu" class="bandeau_1">
sub Menu 1. Links & Images ...
</div>

<div id="main_sous_menu" class="bandeau_2">
sub Menu 2. Links & Images ...
</div>

<div id="main_sous_menu" class="bandeau_3">
sub Menu 3. Links & Images ...
</div>

<div id="main_sous_menu" class="bandeau_4">
sub Menu 4. Links & Images ...
</div>

<div class="content">
</div>

我的 Jquery：

$("#main_sous_menu.bandeau_1").hide();
$("#main_sous_menu.bandeau_2").hide();
$("#main_sous_menu.bandeau_3").hide();
$("#main_sous_menu.bandeau_4").hide();

$(".main_menu li:first-child").hover(
  function () {
    $("#main_sous_menu.bandeau_1").slideToggle();
    }
);
$(".main_menu li:nth-child(2)").hover(
  function () {
    $("#main_sous_menu.bandeau_2").slideToggle();
    }
);
$(".main_menu li:nth-child(3)").hover(
  function () {
    $("#main_sous_menu.bandeau_3").slideToggle();
    }
);
$(".main_menu li:nth-child(4)").hover(
  function () {
    $("#main_sous_menu.bandeau_4").slideToggle();
    }
);

我的 CSS ：

.main_menu {
    font-size: 25px;
    text-align: center;
    border-bottom: 1px solid #EEE;
    padding: 5px 0px;
}

.main_menu li {
    list-style: outside none none;
    display: inline-block;
    vertical-align: top;
}

.content{background-color:red;height:50px}
#main_sous_menu {
    padding-top: 10px;
    width: 100%;
    position: relative;
height:200px;
background-color:green}

这是一个 Jsfiddle 链接，可以查看它的实际效果：

http://jsfiddle.net/xjmk1otu/1/

我想我一开始就使用了错误的方法，但我找不到如何实现这一点希望有人可以帮助我！

非常感谢

【问题讨论】：

标签： jquery drop-down-menu show-hide slidetoggle submenu

【解决方案1】：

此时您只针对具有悬停功能的 li，并且由于您坚持使用滑动切换，因此每当一个 li 未悬停时，它会向上滑动是正常的，为此您需要触发当 ul 悬停时滑动，然后仅在 li 悬停时显示不同的内容。

【讨论】：