通过向上滑动在页面加载时隐藏子菜单

Hiding a sub menu as page loads by sliding up

本文关键字：加载 隐藏 菜单      更新时间：2024-05-30

请参阅fiddlehttp://jsfiddle.net/rabelais/tw6sdod9/4/

当您单击运行或刷新时，当页面加载时，"文本"下的子菜单会向上滑动。我该如何更改这一点，使我们在加载页面时不会看到这种情况发生，但在使用菜单时，其余时间保持菜单在400滑动？

$(document).ready(function () {
$('li ul').slideDown(0);

$('.no-js li a').on("click", function () {
    $('ul#inner-li ul').slideUp(400);
    if($(this).siblings('ul').is(":visible"))
        $(this).siblings('ul').slideUp(400);
    else
        $(this).siblings('ul').slideDown(400);
});
  jQuery('#texts').click();
});


$(document).ready(function () {
    $('li ul').slideDown(0);
    $("#inner-li-texts").hide(0); /* patch here */
    $('.no-js li a').on("click", function () {
        $('ul#inner-li ul').slideUp(400);
        if($(this).siblings('ul').is(":visible"))
            $(this).siblings('ul').slideUp(400);
        else
            $(this).siblings('ul').slideDown(400);
    });
      //jQuery('#texts').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="no-js">
  <li class="caps"><a href="#">Works</a>
      <ul id="inner-li">
                <li><a href="blog.html">blog</a></li>
                <li><a href="portraits.html">Portraits</a></li>
                <li><a href="paintings.html">Paintings</a></li>
                <li><a href="drawings.html">Drawings</a></li>
                <li><a href="photography.html">Photography</a></li>
      </ul></li>
      <li class="caps"><a id="texts" href="#">Texts</a>
      <ul id="inner-li-texts">
                <li><a class="current" href="#essay-one">Essay one</a></li>
                <li><a href="#essay-two">Essay two</a></li>
                <li><a href="#essay-three">Essay three</a></li>
               </ul>
                </li>
  <li class="caps"><a href="../news.htm">News</a></li>
  <li class="caps"><a href="../biography.htm">Biography</a></li>
  
  </ul>

您已经使用.click来触发动画，我只是在文档开始时告诉它隐藏（.hide(0)）。

您可以调用特定的ul，在设置点击之前向上滑动，而不是在设置代码后触发点击：

$(document).ready(function () {
    $('li ul').slideDown(0);
    $('#inner-li-texts').slideUp(0);

    $('.no-js li a').on("click", function () {
        $('ul#inner-li ul').slideUp(400);
        if($(this).siblings('ul').is(":visible"))
            $(this).siblings('ul').slideUp(400);
        else
            $(this).siblings('ul').slideDown(400);
    });
});
相关文章：