0

我正在尝试使用 jquery 制作一个简单的导航菜单，您将鼠标悬停在其中一个 li 上，然后在其下方滑入一个 sub 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>
4

2 回答 2

1

试试这个：

.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(); 
});
于 2012-07-01T05:18:39.730 回答
0

您的代码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 文件，并且该文件是使用效果模块构建的。

于 2012-07-01T05:25:12.597 回答