Question

您好我正在尝试制作可折叠的jQuery导航。我有一些代码在页面加载时隐藏了子类。我可以折叠导航但是在我崩溃后第一个没有其他人似乎崩溃，当他们这样做时他们崩溃了，父类似乎下降了几个像素！

如果任何一个非常好的jQuery可以帮助那将是惊人的！

我的代码位于下方或点击查看我的jsFiddle

的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>

JS / js.js

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

CSS / style.css中

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

Answer 1

我在Fiddle

上尝试了一些事情

$('.header_parent').click(function() {
  $(this).find('.header_child').stop().slideDown('slow');
}).mouseleave(function() {
  $(this).find('.header_child').stop().slideUp('slow');
});

Answer 2

试试这段代码一些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>

导航之间的jquery切换

2 个答案: