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

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 会提供任何优势吗？