jquery - 小白 ！jQuery双击问题和简化代码

Question

我有两张带有底部按钮的图片，该按钮上下滑动显示一些文本包含并且正在工作。

HTML 代码：

<div class="ca-item-main span4">
     <div class="ca-icon"></div>
        <a href="#" class="moreDetails">More Details</a>
       <div class="content"> <p>Lorem Ipsum Dolor </p></div>
</div>
<div class="ca-item-main span4">
     <div class="ca-icon"></div>
        <a href="#" class="moreDetails-2">More Details</a>
       <div class="content-2"> <p>Lorem Ipsum Dolor </p></div>
</div> 

我是 jQuery 的菜鸟，所以我需要一个简单的解决方案来解决两个问题：

1 - 鼠标点击总是第二次工作。我需要双击才能使幻灯片正常工作。

2 - 如何简化这个 jquery 代码？

jQuery代码：

$('.moreDetails, .content').toggle(function(){
    $('.moreDetails, .content').animate({'bottom':0});
}, function(){
    $('.moreDetails, .content').animate({'bottom':190});
});

$('.moreDetails-2, .content-2').toggle(function(){
    $('.moreDetails-2, .content-2').animate({'bottom':0});
}, function(){
    $('.moreDetails-2, .content-2').animate({'bottom':190});
});

感谢您提供任何好的解决方案。

Answer 1

1. 它第二次工作的原因可能是因为底部的css最初是0，因此你在第一次点击时看不到任何区别。但由于您没有提供 js fiddle 或 css，所以它只是一个猜测。2.) 切换是一个已弃用的事件。改用 .click() 并执行 if 语句，例如检查类：

   $('.moreDetails, .content').click( // if hasClass('foobar') // .. // else // .. );