Question

这是我的简单手风琴：

<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>

还告诉我如何在菜单中添加活动和悬停状态。

Answer 1

您忘了return 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>

如果您计划在about.html元素中加载content的内容，请使用load方法。你的功能将是

    $("dt.title").click(function(){ 
        $("div.info").slideToggle("slow");
        $('#content').load($(this).find('a').attr('href'));
        return false;
    });

但这不适用于跨域网址。

[UPDATE]

<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>

Answer 2

这是因为您没有阻止浏览器执行对链接的请求。因此，它被视为一个链接。您可以在单击函数结束时return false;或动态地将href属性值（JavaScript）替换为#;

[编辑] 即使我没有测试它，这应该工作。希望它至少能给你这个想法。

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function(){ 
      $("div.info").slideUp("slow"); 
      $(this).next("div.info:hidden").slideDown("normal" );
      return false;
    }).hover(function(){
        $(this).addClass("hover");
      },function(){
        $(this).removeClass("hover");
    }).each(function(){
      $(this).attr("href","#");
    });
});
</script>

手风琴菜单停止添加href链接

2 个答案: