滑动开关不会在 Class 上激活

Question

我查了很多关于这个主题的问题，有类似的答案应该有用，但它不适合我。我承认 DOM 遍历不是我的强项，所以如果您有解决方案并且可以提供一些上下文，那将真正帮助我理解为什么其他解决方案不起作用。

我有一个带按钮的 div，单击按钮（此按钮仅出现在移动设备上）时，它应该只向下滑动当前的 div 内容。我可以让它工作，但问题是它打开了 div 的所有内容。但是，即使使用 $(this)、$(next)、$(prev) 或 $(find) 等解决方案，我也无法让它只打开特定的卡。

我在下面发布的代码根本无法打开它，我使用这个版本的代码是因为它与 Stack Overflow 上的答案最相似。

    $(document).ready(function(){
 
 $('.mobile-icon').on('click', function(){
  event.preventDefault();
  $(this).next().find('.card-bottom').slideToggle();
  console.log('hi there'); //this does print

 });


    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <!-- FIRST CARD -->
    <div class="card">
      <div class="card-top">
     <h1 class="card-title">Headline</h1>
  <a href="#" class="mobile-icon"> <span class="glyphicon glyphicon-plus"></span> </a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
  </div>
  <!-- END CARD-TOP -->
    
       <div class="card-bottom">
      <p>Content to be toggled</p>
    </div>
       <!-- END CARD BOTTOM -->
    </div>
    <!-- END CARD -->

    <!-- SECOND CARD -->
    <div class="card">
      <div class="card-top">
     <h1 class="card-title">Headline</h1>
  <a href="#" class="mobile-icon"> <span class="glyphicon glyphicon-plus"></span> </a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
  </div>
  <!-- END CARD-TOP -->
    
       <div class="card-bottom">
      <p>Content to be toggled</p>
    </div>
       <!-- END CARD BOTTOM -->
    </div>
    <!-- END CARD -->

Answer 1

主要问题是您如何使用 jQuery 的 .next() 和 .find()。由于 $(this) 是 <a> tag，因此 <p> tag 上的 .next(), which selects the next sibling, is the <p> tag. Then calling .find() 将检查其所有后代，其中有 none。

因此，在使用 .find() 向下遍历之前，您需要 select 'card-top' 和 'card-bottom' div 的父级。

例如：

$(document).ready(function(){
  $('.mobile-icon').on('click', function(event){
      event.preventDefault();
      $(this).parent().parent().find('.card-bottom').slideToggle();
  });
});

对 .parent() 的第一次调用将是 <a> 标记的父级，即 'card-top' div，而其 .parent() 将是 'card' div.然后调用 .find() 就可以了。

http://www.bootply.com/UMwXaOILHv

Answer 2

在 class="card>

"

将 event 添加到 function() 所以它是 function(event)
如果您不需要在任何地方 link 使用 div 而不是 a 标签，您就不需要 preventDefault .

$('.mobile-icon').on('click', function(event) {
  event.preventDefault();
  $(this).closest('.card').find('.card-bottom').slideToggle();
  // .closest finds the nearest .card ancestor (it goes up)
  // .find then finds .card-bottom within the closest .card
 });

.mobile-icon {
  background-color: black;
  width: 100px; height: 40px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
  <div class="card-top">
    <h1 class="card-title">Headline</h1>
    <div class="mobile-icon">click me</div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
 </div>
 <!-- END CARD-TOP -->
   <div class="card-bottom">
     <p>Content to be toggled</p>
   </div>
   <!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->

<!-- SECOND CARD -->
<div class="card">
  <div class="card-top">
    <h1 class="card-title">Headline</h1>
    <a href="#" class="mobile-icon">click me</a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
 </div>
 <!-- END CARD-TOP -->
   <div class="card-bottom">
     <p>Content to be toggled</p>
   </div>
   <!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->

fiddle

https://jsfiddle.net/Hastig/m2zaLfnz/

滑动开关不会在 Class 上激活

Slide Toggle Won't Activate On Class

javascript

jquery

dom-traversal