Question

我有一个锚点，当你点击它时会在一个div中滑动一个表格，然后再次点击会将它向后滑动。最初我只使用.toggle，但现在我有多个锚和多个div具有相同的类，所以我不得不重做代码，否则无论何时你点击任何锚点，所有的div都会滑落，你会看到4个表格。

所以，我以为我可以用.closest重写代码，但它似乎没有用。我认为这是因为.closest必须上升到DOM层次结构，所以它不会像我的div一样工作。我试过.sibling，但这也不起作用。有什么想法吗？

  <a href="#" class="payment-form-show">Pre-Pay with Credit Card</a>
  <div style="display: none;" class="payment-form-wrapper">
      <h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
      <form action="" method="POST" id="stripe-payment-form" class="payment-form">
        ...
      </form>
  </div>

  <script>
        $("a.payment-form-show").click(function() {
            var e = $(this).closest("div.payment-form-wrapper");
                    if (e.is(":hidden")) {
                        e.slideDown("slow");
                        $(this).html("Don't Pre-Pay with Credit Card")
                    } else {
                        e.slideUp("slow");
                        $(this).html("Pre-Pay with Credit Card")
                    }
            return false;
        });
    </script>

Answer 1

我认为你应该将你的a.payment-form-show和div.payment-form-wrapper包装在div中。像这样：

<div>
<a href="#" class="payment-form-show">Pre-Pay with Credit Card</a>
  <div style="display: none;" class="payment-form-wrapper">
      <h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
      <form action="" method="POST" id="stripe-payment-form" class="payment-form">
        ...
      </form>
  </div>
</div>

单击a标记后，您将查找直接父级，然后找到该表单：

$（本）.parent（）发现（ “div.payment外形包装”）;
在这种情况下，div包装器用作标签的上下文。这将创建一个更易于维护的代码。因为当您使用.next（）或某些函数来查找.div.payment-form-wrapper时，您的javascript代码会耦合到标记的当前位置。将来，如果您修改位置，或在其间添加一些标签，您的代码就会失败。

Answer 2

使用此...

$(".payment-form-show").on('click', function() {
    $('.payment-form-wrapper').slideToggle('slow');
    if($('.payment-form-wrapper').is('visible')){
        $(this).html("Pre-Pay with Credit Card");
    }else{
        $(this).html("Don't Pre-Pay with Credit Card");
    }
});

请参阅 DEMO

Answer 3

即使所有div具有相同的类，此代码也应该有效。看看：

$(".payment-form-show").on('click', function() {
    var slider = $(this).closest("a").next();

    slider.slideToggle("slow");    
    slider.is(":visible") ? $(this).html("Pre-Pay with Credit Card") : $(this).html("Don't Pre-Pay with Credit Card");
});

小提琴基于MG_Bautista的小提琴：http://jsfiddle.net/8b5q5/1/

Jquery a .click然后.slideDown div

3 个答案: