JQuery切換UL加載可見

Question

經過大量的Google搜索後，我想到了如何使用Jquery切換。它似乎工作正常。但在加載首先'UL'是可見的，如果我點擊隱藏（所以切換似乎工作）我只是不知道如何隱藏加載UL然後顯示點擊這裏是我的代碼

jQuery（function （$）{

$('.cliackable').click(function(){ $(this).find('ul').toggle();}); 

$('.cliackable').click(function(event) { 
    event.stopPropagation(); 
}); 

}）; //函數結束

    <div id="navigation-prof"> 

         <ul class="sf-menu-prof" > 

          <li style="color:#fff;" class="cliackable"> 

           <?php echo get_avatar($userdata->ID, 35);?> 

           <ul> 
             <div style="padding:15px 0px 0px 15px; "> 
              <div class="left" style="padding-bottom:10px;"> 
               <?php echo get_avatar($userdata->ID, 75);?> 
              </div> 
              <div class="right" style="align:left"> 
               <a href="" class="login-head-font" style="text-align:left"><?php echo $userdata->user_firstname .' ' . $userdata->user_lastname ;?></a> 
              </div> 

             </div> 
            <div style="width:100%;"> 
            <li> 
             <a class="login-head-font" href="http://thecampustree.com/your-profile">Profile</a> 
            </li> 
            <li> 
             <a class="login-head-font" href="http://thecampustree.com/dashboard">Dashboard</a> 
            </li> 
            <li> 
             <a href="<?php echo wp_logout_url(home_url()); ?>" title="Logout">Logout</a> 
            </li> 
            </div> 
           </ul> 
          </li> 
         </ul> 


        </div> 

CSS >>

#navigation-prof {width:35px; border-left:1px solid #999;padding:5px; border-right:1px solid #999;padding:0px 5px 0px 5px;} 
#navigation-prof .sf-menu-prof ul li ul{display:none;} 
#navigation-prof .sf-menu-prof ul{ background:#e73420; width:250px; margin:0px 0px 0px -200px;} 
#navigation-prof .sf-menu-prof li li{background:#e73420;border-top:1px solid rgba(0,0,0,0.1); width: 235px; clear:both; padding:5px 0px 5px 15px; color:#fff;} 
#navigation-prof .sf-menu-prof li li a {width: 235px; padding:5px 100px 5px 15px; color:#fff;} 

////我是一個NEWBEI ////感謝

Answer 1

你可以將其隱藏在文檔準備事件：

$('.cliackable ul').hide(); 

或使用CSS隱藏它：

#navigation-prof .sf-menu-prof li ul { 
    display: none; 
}