试图默认隐藏我的下拉菜单

Question

我正在试图弄清楚默认情况下我如何隐藏我的下拉菜单。基本上它在一开始就出现了。 “我的帐户”下拉菜单

这是我的HTML

           <li class="hoverli"><a  href="/customer/account">My Account</a>

                    <ul class="user-account">

                       <li><a href="">edit my account</a></li>

                       <li id="wish"><a href="">my wishlist</a></li>

                       <li id="gift"><a href="">my gift registry</a></li>

                    </ul>

                 </li>

这是我的Javascript

<script type="text/javascript">
jQuery(function(){
    jQuery(".hoverli").hover(
      function () {
         jQuery('.user-account').slideDown('slow');
      }, 
      function () {
         jQuery('.user-account').slideUp('slow');
      }
    );
}); 
</script>

Answer 1

添加css规则

.user-account {
    display: none
}

或在页面加载时使用jQuery隐藏它

jQuery(function(){
    var $ua = jQuery('.user-account').hide(); //cache the selector since it is used multiple times
    jQuery(".hoverli").hover(
      function () {
         $ua.slideDown('slow');
      }, 
      function () {
         $ua.slideUp('slow');
      }
    );
}); 

Answer 2

为什么在使用CSS完成相同操作时使用Java-Script，如以下示例所示：

.user-account {
    display: none;
}

li:hover .user-account {
    display: inline-block;
}

如果你想要动画：

.user-account {
    display: none;
    position: relative;
    top : -100%;
    transition: top 2s ease-in-out;
    z-index:0;
}

li:hover .user-account {
    display: inline-block;
    top : -100%;
}

javascript会在这些情况下提供任何优势吗？