Question

我试图使用jquery创建一个简单的导航菜单，将鼠标悬停在其中一个li上，然后在其下滑动一个子ul li。我可以使用slideToggle（）工作得很好，但是不能让我的生活滑行工作。（我正在调试点击但需要它悬停）。使用Javascript：

<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（[duration] [，easing] [，callback]）

$(".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(); 
});

Answer 2

show()的代码签名错误：http://api.jquery.com/show/

可以是：
.show()
或
.show( duration [, callback] )
或
.show( [duration] [, easing] [, callback] )

在您的情况下，您可以使用animate()水平滑动：

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

修改
通过如果您使用jQuery UI效果，语法是正确的。确保您已在页面中包含jQuery UI .js文件，并且此文件是使用效果模块构建的。

Jquery滑动ul li

2 个答案: