Question

我查了很多关于这个主题的问题，并且有类似的答案应该有用，但它对我不起作用。我承认DOM遍历不是我的强项，所以如果你有一个解决方案并且可以给出一些背景知识，那么我真的会理解为什么其他解决方案不起作用。

我有一个带按钮的按钮和按钮点击（此按钮仅出现在手机上）它应该只向下滑动当前的div内容。我可以让这个工作，但问题是它打开所有divs的内容。然而，即使使用$（this），$（next），$（prev）或$（find）等解决方案，我也无法打开特定的卡片。

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

＆＃13;

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

＆＃13;

<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 -->

＆＃13;

Answer 1

主要问题是您如何使用jQuery＆＃39 .next()和.find()。由于$(this)是<a> tag，.next()，它选择下一个兄弟，是<p> tag。然后在<p> tag上调用.find()将检查所有后代，但没有后代。

因此，您需要选择＆＃39; card-top＆＃39;和＆＃39;卡底＆＃39;在你用.find（）遍历之前的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)
如果您不需要在任何地方进行关联，请使用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 -->

<强>拨弄

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

幻灯片切换不会在课堂上激活

2 个答案: