我试图使用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>
答案 0 :(得分: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();
});
答案 1 :(得分: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文件,并且此文件是使用效果模块构建的。