Jquery sliding ul li

Question

jquery를 사용하여 간단한 탐색 메뉴를 만들려고합니다. 여기에서 li 중 하나를 가리키면 하위 ul li가 아래로 슬라이드됩니다. slideToggle()을 사용하여 작업 할 수는 있지만 슬라이드가 작동하는 것은 불가능합니다. (나는 클릭으로 디버깅을하고 있었지만 마우스를 가져 가면된다.) 자바 스크립트 :

<script type="text/javascript"> 
    // Wait for the page and all the DOM to be fully loaded 
    $(document).ready(function() { 
     // Add the 'hover' event listener to our drop down class 
     $(".dropdown").click(function() { 
      // When the event is triggered, grab the current element 'this' and 
      // find it's children '.sub_navigation' and display/hide them 
      //$(this).find('.sub_navigation').slideToggle(); 
      $(this).find(".sub_navigation").show("slide", { direction: "left" }, 1000); 
     }); 
    }); 
</script> 

CSS

ul { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    min-width:200px; 
} 
ul#navigation { 
    float:left; 
} 
ul#navigation li { 
    float:left; 
    border:1px black solid; 
    min-width:200px; 
} 
ul.sub_navigation { 
    position:absolute; 
    display:none; 
    overflow: hidden; 
} 
ul.sub_navigation li { 
    clear:both; 
    margin-left: 9999px; 
    float: left; 
} 
a,a:active,a:visited { 
    display:block; 
    padding:10px; 
} 

목록

<div id="menu"> 
    <ul id="navigation"> 
     <li class="dropdown"><a href="javascript:ajaxpage('home.php', 'body');">Home</a></li> 
     <li class="dropdown"><a href="javascript:ajaxpage('projects.php', 'body');">Projects</a> 
      <ul class="sub_navigation"> 
       <!-- pull projects with P H P --> 
       <?php 
        require('config/config.php'); 
        //pull all data from projects table 
        $result = mysql_query("SELECT * FROM projects") or die('Unable to query!'); 
        $num_results = mysql_num_rows($result); 
        //make sure there is at least 1 project 
        if ($num_results > 0) { 
          //loop to catch each project in database 
          while ($row = mysql_fetch_array($result)) { 
          //return in list each project name 
          ?> 
          <li><a href="openproject.php?id=<? echo $row['id']; ?>"><? echo $row['name']; ?></a></li> 
          <?php 
          }        
        } else { 
        //return to add a project 
        ?> 
        <li><a href="createproj.php">Add a project</a></li> 
        <?php 
        } 
        ?> 
       </ul> 
      </li> 
      <li class="dropdown"><a href="javascript:ajaxpage('pubfiles.php', 'body');">Public Files</a></li> 
      <li class="dropdown"><a href="javascript:ajaxpage('users.php', 'body');">Users</a></li> 
      <li class="dropdown"><a href="javascript:ajaxpage('settings.php', 'body');">Settings</a></li> 
      <!-- only pull if admin and logged in per P H P session--> 
      <li class="dropdown"><a href="javascript:ajaxpage('admin.php', 'body');">Admin</a></li> 
     </ul> 
    </div> 

Answer 1

show()에 대한 코드는 잘못된 서명이 있습니다 http://api.jquery.com/show/

이 될 수 있습니다 :
.show()
또는
.show(duration [, callback])
또는 경우 .show([duration] [, easing] [, callback])

, 당신이 할 수있는를 사용하십시오.가로 슬라이드 :

이

$(this).find(".sub_navigation").animate({ width: "toggle" }, 1000); 

편집 : 당신이 jQuery를 UI 효과를 사용하는 경우
Althrough, 구문이 정확합니다. jQuery UI .js 파일이 페이지에 포함되어 있고이 파일이 효과 모듈로 작성되었는지 확인하십시오.

Answer 2

이 시도 :

.show ([시간] [완화] [콜백])

$(".dropdown").hover(function() { 
     $(this).find(".sub_navigation").show("slow"); 
     //or $(this).find(".sub_navigation").slideDown(); 
    },function() { 
     $(this).find(".sub_navigation").hide('slow');  
     // or $(this).find(".sub_navigation").slideUp(); 
});