0

我正在尝试制作一些手风琴菜单，但我遇到了一个小问题。关键是当我单击幻灯片展开的第一个面板时一切正常，当我单击第二个面板时它工作正常，同上。但是，当我重新开始并单击第一个时，令人惊讶的是，没有任何反应，我再次单击，然后幻灯片才展开：D

这是我的小提琴！

$('#one').toggle(function(){
$('.content').animate({width:'42%'});
$('.content1').animate({width:'0%'});    
}, function(){ 
$('.content').animate({width:'0%'});
});


$('#two').toggle(function(){
$('.content1').animate({width:'42%'});
$('.content').animate({width:'0%'});    
}, function(){ 
$('.content1').animate({width:'0%'});
});

这很奇怪，我希望它们从第一次点击开始扩展。有人可以帮我吗？

4

1 回答 1

0

你的方法有一些缺陷。首先，如果您希望它具有可扩展性，请重用类。其次，您希望您的 jQuery 以一个类而不是唯一元素为目标，因为您希望它可以在任何上下文中工作。我冒昧地调整了您的html：

<ul id="vertical">
    <li id="one" class="panel"></li>
    <li class="content"></li>
    <li id="two" class="panel"></li>
    <li class="content"></li>
    <li id="three" class="panel"></li>
    <li class="content"></li>
</ul>

JavaScript 方法也可以更加优雅。您不需要检查每个元素，因为您知道必须扩展哪个元素。

$('.panel').click(function(){

    //hide everything
    $(".content").stop().animate({"width": 0}, 500);

    //animate the target element to the desired width
    //because animations are asynchronous, this line will execute immediately after the first,
    //the stop() will ensure this element will immediately stop whatever animation it was doing,
    //and then animate to 42%
    $(this).next().stop().animate({"width": "42%"}, 500);       
});

看到它在行动

于 2013-06-07T11:02:38.170 回答