切换动画链接答案

【问题标题】：Toggle animate links切换动画链接
【发布时间】：2011-09-13 02:19:33
【问题描述】：

我想在下面的代码中切换链接的宽度。它可以工作，但我希望在单击另一个链接时恢复宽度，从而保留一个扩展链接，我希望我有意义。

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript">         
    $(document).ready(function () {

    //animate links
    $(".nav_links li a.link").toggle(function(){
        $(this).animate({width:237},200);
    },function(){
        $(this).animate({width:72},200);
    });



    });
</script>
</head>

<body>
<ul>
        <li><a href="#" class="about link"></a></li>
many other links here
        </ul>
</body>
</html>

【问题讨论】：

标签： jquery toggle hyperlink

【解决方案1】：

我不会为此使用切换，因为它有利于一件事 - 切换单个选定项目/组的打开/关闭。您要做的是在打开一个项目时重置其他项目。尝试这样的事情：

$(".nav_links li a.link").click(function(){
    // Reset all links.
    $(".nav_links li a.link").animate({width:72},200);

    // Set currently clicked on as necessary.
    $(this).animate({width:237},200);
});

【讨论】：

康！愿你永生！你刚刚拯救了一个灵魂！