Question

我正在尝试制作一些手风琴菜单，但我面临一个小问题。关键是当我单击幻灯片展开的第一个面板时，一切正常，当我单击它工作的第二个面板时，同上。但是，当我再次开始并点击第一个时，惊喜，没有任何反应，我再次点击，然后幻灯片展开：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%'});
});

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

Answer 1

你的方法有一些缺陷。首先，如果您希望这是可扩展的，请重用类。其次，您希望您的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);       
});

See it in action

点击简单的acordition菜单挑战

1 个答案: