如何向下滑动元素的一个级别，而不是子级别

Question

当我使用这段代码时：

jQuery的：

$(this).next().slideDown()

选择器：$(this).next()

HTML：

<li class="sub-menu two-level-collapse">
                    <a href="javascript:void(0);" class="two-level-collapse parent"><i
                            class="fa fa-line-chart"></i><span>Quản lý dữ liệu trạm</span><i
                            class="arrow fa fa-angle-right pull-right"></i></a>
                    <ul class="two-level-collapse">
                        <li class="sub-menu two-level-collapse">
                            <a class="two-level-collapse" id="sub-sub-a" href="javascript:void(0);">
                                <i></i><span>cem</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                            <ul class="two-level-collapse">
                                <li class="two-level-collapse"><a
                                        href='{{pathFor route='manager.csv' query='type=humid_cem'}}'>humid_cem</a></li>
                                <li class="two-level-collapse"><a
                                        href='{{pathFor route='manager.csv' query='type=temp_cem'}}'>temp_cem</a></li>
                                <li class="two-level-collapse"><a href='{{pathFor route='manager.csv'
                                                                                  query='type=rainfall_cem'}}'>rainfall_cem</a>
                                </li>
                            </ul>
                        </li>
                        <li class="sub-menu two-level-collapse">
                            <a class="two-level-collapse" id="sub-sub-a" href="javascript:void(0);">
                                <i></i><span>kttvtw</span><i class="arrow fa fa-angle-right pull-right"></i></a>
                            <ul class="two-level-collapse">
                                <li class="two-level-collapse"><a href='{{pathFor route='manager.csv'
                                                                                  query='type=humid_kttvtw'}}'>humid_kttvtw</a>
                                </li>
                                <li class="two-level-collapse"><a
                                        href='{{pathFor route='manager.csv' query='type=temp_kttvtw'}}'>temp_kttvtw</a>
                                </li>
                                <li class="two-level-collapse"><a
                                        href='{{pathFor route='manager.csv' query='type=rainfall_kttvtw'}}'>rainfall_kttvtw</a>
                                </li>
                            </ul>
                        </li>
                        <li class="sub-menu two-level-collapse">
                            <a class="two-level-collapse" id="sub-sub-a" href="javascript:void(0);">
                                <i></i><span>global</span><i class="arrow fa fa-angle-right pull-right"></i></a>    
                        </li>
                    </ul>
                </li>

它扩展了$(this).next()的所有子级别 像那样：demo

我怎样才能向下滑动元素的一个级别，而不是子级别？先谢谢你！

Answer 1

啊..现在我明白了。

是你想要的吗？

https://www.w3schools.com/code/tryit.asp?filename=FMWU6SGV4H8C

基本上我补充说，菜单最初是隐藏的：

<style>
  ul.two-level-collapse {
    display:none
  }
</style>

Answer 2

我怎样才能向下滑动元素的一个级别，而不是子级别？

你的意思是只有直接的后代应该向下滑动，然后才能成功

$(this).next().find( "> ul.children" ).slideDown();

演示

$( "a" ).click( function(e){
   $(this).next().find( "> ul.children" ).slideToggle(); //using slideToggle since slideDown is not available with jquery.
   e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="">Clinical/Laboratory</a>
<li class="page_item page-item-29 current_page_item parent"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/">Clinical/Laboratory</a>
  <ul class="children" style="display: none;">
    <li class="page_item page-item-40 parent"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/histopathology/">Histopathology</a>
      <ul class="children" style="display: none;">
        <li class="page_item page-item-99"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/histopathology/test-page/">Test page</a></li>
      </ul>
    </li>
    <li class="page_item page-item-42"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/bacteriology/">Bacteriology</a></li>
    <li class="page_item page-item-46"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/packaging-guidelines/">Packaging Guidelines</a></li>
    <li class="page_item page-item-44"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/water-quality-analysis/">Water Quality Analysis</a></li>
  </ul>
</li>

Answer 3

从你的问题我明白你想要直接使用li元素，如果是这样你可能会使用以下行

$(this).next().firstElementChild

这将为您提供直接子项，您可以使用slideDown（）方法。