1

こんにちは、折りたたみ可能な 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;
}
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 に答える