Question

我创建了一个简单的切换显示和隐藏。

我在复制课时遇到了问题。

我的切换工作正常，但是当我复制容器并按下触发器时，它会显示所有容器而不仅仅是容器。

我尝试使用（this）.find函数调整我的代码，但它不起作用。有人能告诉我哪里出错了？

 <!--SHARE-->
                <a href="#share-trigger" class="share-trigger"><i class="fa fa-share"></i>Share</a>
                <div class="show-share-box">
                  <div class="share-this-wrap">
                     <a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
                       <i class="fa fa-facebook"></i>
                       <div class="meta-share-wrap">
                         <span class="shot-social-count">4</span>
                       </div>
                     </a>

                     <a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
                       <i class="fa fa-twitter"></i>
                       <div class="meta-share-wrap">
                         <span class="shot-social-count">6</span>
                       </div>
                     </a>
                  </div>
                </div><!--end share box-->

我的代码有效。

  $(".share-trigger").click(function(e){
      e.preventDefault();
      $(".show-share-box").slideToggle('slow');
  })

我的代码无效 - 这里我试图添加（此功能）

  $(".share-trigger").click(function(e){
      e.preventDefault();
      $(this).find('.show-share-box').slideToggle('slow');
  })

非常感谢！

Answer 1

接下来将选择所有.show-share-box，因此使用下一组中的第一个应该可以解决问题。

$(".share-trigger").click(function(e){
    e.preventDefault();
    //$(".show-share-box").slideToggle('slow');
    $(this).next(".show-share-box").first().slideToggle('slow');
})

Answer 2

问题是您选择<a>元素作为$(this)并找到位于('.show-share-box')

之外的<a>内部

您可以使用.next()或直接使用class来切换

Jsfiddle：http://jsfiddle.net/FtgN4/2/

$(".share-trigger").click(function (e) {
    e.preventDefault();
    $('.show-share-box').slideToggle("slow", function () {
        // animation complete
    });
})

Answer 3

$(this).find('.show-share-box').slideToggle('slow');

$(this) - ＆gt;指的是当前元素.share-trigger在您的情况下

<小时/> $(this).find('.show-share-box')表示在.show-share-box

中找到.share-trigger

您的代码无效，因为.show-share-box内没有元素.share-trigger

<小时/> OP更新问题后更新。

.next()

$(this).next('.show-share-box').slideToggle('slow');

Answer 4

应该是：

$(this).next('.show-share-box').slideToggle('slow');

如何使用Jquery指定类

4 个答案: