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

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');
      }
    );
});