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

发布于 2024-10-19 10:37:22 字数 1175 浏览 2 评论 0原文

这是我的简单手风琴：

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

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

原文

Here my simple accordion :

<script type="text/javascript">
$(function()
{
    $("dt.title").click(function()
    { 
      $("div.info").slideUp("slow"); 
      $(this).next("div.info:hidden").slideDown("normal" );
    });
});
</script>

And it works fine with the this 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>

When I put the href links, the menu stops working. For example :

<dt class="title"><a href="about.html">About</a></dt>

Also tell me how can I add the active and hover state in the menu.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳公公是暖光 2024-10-26 10:37:22

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

如果您计划在 content 元素中加载 about.html 的内容，请使用 load > 方法。您的函数将类似于

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

但这不适用于跨域 url。

[更新]

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

You forgot to 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>

If you are planning to load the content of about.html in content element then use load method. Your function will be something like

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

But this will not work for cross-domain url.

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

回复收藏 0 原文

━╋う一瞬間旳綻放 2024-10-26 10:37:22

这是因为您没有阻止浏览器执行对链接的请求。因此，它被视为链接。您可以在单击函数末尾 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>

That is because you are not preventing the browser from executing the request to the link. Therefor, it is treated as a link. You can either return false; at the end of you click function or replace the href attribute value dynamically(JavaScript) to #;

[EDIT]
This should work even though I haven't tested it. Hope it at least gives you the idea.

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

回复收藏 0 原文

~没有更多了~