这是我的简单 Accordion :
<script type="text/javascript">
$(function()
{
$("dt.title").click(function()
{
$("div.info").slideUp("slow");
$(this).next("div.info:hidden").slideDown("normal" );
});
});
</script>
它与这个 html 配合得很好:
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title"><a href="#">About</a></dt>
<dt class="title"><a href="#">Work</a></dt>
<div class="info">
<ul>
<li><a href="#">Bol</a></li>
<li><a href="#">Annie</a></li>
<li><a href="#">Imran</a></li>
</ul>
</div>
<dt class="title"><a href="#">Contact</a></dt>
<dt class="title"><a href="#">Links</a></dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
当我放置 href 链接时，菜单停止工作。例如:
<dt class="title"><a href="about.html">About</a></dt>
还告诉我如何在菜单中添加事件和悬停状态。
最佳答案
您忘记返回 false
<script type="text/javascript">
$(function()
{
$("dt.title").click(function(){
$("div.info").slideUp("slow");
$(this).next("div.info:hidden").slideDown("normal" );
return false; //do it here
});
});
</script>
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title"><a href="#">About</a></dt>
<dt class="title"><a href="about.html">Work</a></dt>
<div class="info">
<ul>
<li><a href="#">Bol</a></li>
<li><a href="#">Annie</a></li>
<li><a href="#">Imran</a></li>
</ul>
</div>
<dt class="title"><a href="#">Contact</a></dt>
<dt class="title"><a href="#">Links</a></dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
如果您计划在 content 元素中加载 about.html 的内容，请使用 load 方法。你的函数将类似于
$("dt.title").click(function(){
$("div.info").slideToggle("slow");
$('#content').load($(this).find('a').attr('href'));
return false;
});
但这不适用于跨域网址。
[更新]
<script type="text/javascript">
//no use for this var
var loader = $("<div></div>").html('Loading')
$(document).ready(function() {
$(".title").click(function(){
$(this).find("ul").slideToggle("slow");
//do all the animations here
//but using $.get, you will get more animation effect
//I guess
$('#content').load($(this).find('a').attr('href'));
return false;
});
//similarly for inner link
$(".title ul a").click(
function ()
{
$('#content').load($(this).attr('href'));
return false;
});
});
</script>
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title"><a href="test.php">About</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
<dt class="title"><a href="test.php">Work</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
<dt class="title"><a href="test.php">Contact</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
<dt class="title"><a href="test.php">Links</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
</ul>
</div>
<div id="content">
<p>Welcome to my site!!!!!!!!!!!!!!!!!!!!!!!</p>
<p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery.
We will be adding ajax functionality so that the content loads into the relevant container instead
of the user having to navigate to another page. We will also be integrating some awesome effects...
</p>
</div>
</div>
</body>
关于jquery - Accordion 菜单停止添加 href 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5151718/