1

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

如果任何一个非常好的 jQuery 可以提供帮助，那就太棒了！

我的代码在下面或点击查看我的jsFiddle

索引.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;
}
4

2 回答 2

1

我正在Fiddle上尝试一些东西

$('.header_parent').click(function() {
  $(this).find('.header_child').stop().slideDown('slow');
}).mouseleave(function() {
  $(this).find('.header_child').stop().slideUp('slow');
});
于 2013-09-20T10:54:44.540 回答
1

试试这段代码，一些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>
于 2013-09-20T10:55:05.457 回答