jquery在导航之间切换

嗨，我正在尝试制作一个可折叠的jQuery导航。我有一些代码隐藏了页面加载中的children类。我可以折叠导航，但在折叠第一个导航后，其他导航似乎都没有折叠，而且当它们折叠时，父类似乎会下降几个像素

如果任何一个非常好的jQuery都能帮上忙的话，那就太棒了

我的代码在下面或单击查看我的

index.html

<div class="headernav">
<ul id="header_nav">
    <li class="header_parent">Reports
        <ul class="header_child">
            <li class="h_child">Download CSV</li>
            <li class="h_child">URLS CSV</li>
            <li class="h_child">Partners CSV</li>
            <li class="h_child">Google Analytics CSV</li>
        </ul>
    </li>
    <li class="header_parent">Manage
        <ul class="header_child">
            <li class="h_child">Domain</li>
            <li class="h_child">Account</li>
            <li class="h_child">Design</li>
        </ul>
    </li>
    <li class="header_parent">Subscriptions
        <ul class="header_child">
            <li class="h_child">A</li>
            <li class="h_child">B</li>
            <li class="h_child">C</li>
        </ul>
    </li>
      <li class="header_parent">Media Store
        <ul class="header_child">
            <li class="h_child">Image Store</li>
            <li class="h_child">Document Store</li>
            <li class="h_child">Media Store</li>
        </ul>
    </li>
</ul>
 </div>

css/style.css

    $('.header_child').hide();
$('.header_parent').on('click', function() {
    $(this).find('ul').stop(true, false).slideToggle();
}).on('mouseout', function() {
    $('.header_child').find('li').stop(true, false).slideUp();
});

.headernav {
    color:#FFF;
    width:auto;
    height:150px;
    background-color:#000;
    }


.headernav ul {
float:left;
list-style:-inline;

}

.header_parent {
    padding-left:20px;
    display:inline-block;
}


.h_child {
display:block;
}

我在试什么

试试这个代码 css的一些变化也起了作用

<script>
$(document).ready(function(){
    $('.header_child').hide();
    $('.header_parent').hover(
      function(){
          $(this).find('ul').stop(true, false).slideDown('slow');
      },
      function(){
          $(this).find('ul').stop(true, false).slideUp('slow');
      }
    )
});
</script>
<style>
.headernav {
    color:#FFF;
    width:auto;
    height:150px;
    background-color:#000;
    }


.headernav ul {
float:left;
list-style:-inline;

}

.header_parent {
    padding-left:20px;
    display:inline-block;
    position:relative;
}
.header_parent .header_child{   
    width:200px;
    position:absolute;  
    padding:0px 0px 0px 20px;
    left:0px;
    margin:0px;
}




.h_child {
display:block;
}
</style>
<div class="headernav">
<ul id="header_nav">
    <li class="header_parent">Reports
        <ul class="header_child" >
            <li class="h_child">Download CSV</li>
            <li class="h_child">URLS CSV</li>
            <li class="h_child">Partners CSV</li>
            <li class="h_child">Google Analytics CSV</li>
        </ul>
    </li>
    <li class="header_parent">Manage
        <ul class="header_child">
            <li class="h_child">Domain</li>
            <li class="h_child">Account</li>
            <li class="h_child">Design</li>
        </ul>
    </li>
    <li class="header_parent">Subscriptions
        <ul class="header_child">
            <li class="h_child">A</li>
            <li class="h_child">B</li>
            <li class="h_child">C</li>
        </ul>
    </li>
      <li class="header_parent">Media Store
        <ul class="header_child">
            <li class="h_child">Image Store</li>
            <li class="h_child">Document Store</li>
            <li class="h_child">Media Store</li>
        </ul>
    </li>
</ul>
 </div>

$（文档）.ready（函数（）{
$（'.header_child'）.hide（）；
$（'.header\u parent'）。悬停(
函数（）{
$（this.find（'ul'）。stop（true，false）。slideDown（'slow'）；
},
函数（）{
$（this.find（'ul'）。stop（true，false）。slideUp（'slow'）；
}
)
});
海德纳夫先生{
颜色：#FFF；
宽度：自动；
高度：150像素；
背景色：#000；
}
海德纳夫{
浮动：左；
列表样式：-内联；
}
.header\u父项{
左侧填充：20px；
显示：内联块；
位置：相对位置；
}
.header\u父项.header\u子项{
宽度：200px；
位置：绝对位置；
填充：0px 0px 0px 20px；
左：0px；
边际：0px；
}
h_child先生{
显示：块；
}

报告

下载CSV
URL CSV
合作伙伴CSV
谷歌分析CSV


管理

域
账户
设计


订阅

A
B
C


媒体商店

图像商店
文档存储
媒体商店

乍一看，我认为

幻灯片可能是原因之一。在
mouseout
上这样做的具体原因是什么？@Harry我做了mouseout，这样当鼠标不存在时，我希望它被隐藏，我应该使用不同的动画功能吗？你可以通过css来做，无需应用jquery
<script>
$(document).ready(function(){
    $('.header_child').hide();
    $('.header_parent').hover(
      function(){
          $(this).find('ul').stop(true, false).slideDown('slow');
      },
      function(){
          $(this).find('ul').stop(true, false).slideUp('slow');
      }
    )
});
</script>
<style>
.headernav {
    color:#FFF;
    width:auto;
    height:150px;
    background-color:#000;
    }


.headernav ul {
float:left;
list-style:-inline;

}

.header_parent {
    padding-left:20px;
    display:inline-block;
    position:relative;
}
.header_parent .header_child{   
    width:200px;
    position:absolute;  
    padding:0px 0px 0px 20px;
    left:0px;
    margin:0px;
}




.h_child {
display:block;
}
</style>
<div class="headernav">
<ul id="header_nav">
    <li class="header_parent">Reports
        <ul class="header_child" >
            <li class="h_child">Download CSV</li>
            <li class="h_child">URLS CSV</li>
            <li class="h_child">Partners CSV</li>
            <li class="h_child">Google Analytics CSV</li>
        </ul>
    </li>
    <li class="header_parent">Manage
        <ul class="header_child">
            <li class="h_child">Domain</li>
            <li class="h_child">Account</li>
            <li class="h_child">Design</li>
        </ul>
    </li>
    <li class="header_parent">Subscriptions
        <ul class="header_child">
            <li class="h_child">A</li>
            <li class="h_child">B</li>
            <li class="h_child">C</li>
        </ul>
    </li>
      <li class="header_parent">Media Store
        <ul class="header_child">
            <li class="h_child">Image Store</li>
            <li class="h_child">Document Store</li>
            <li class="h_child">Media Store</li>
        </ul>
    </li>
</ul>
 </div>