幻燈片切換不會在類上激活

Question

我查了很多關於這個主題的問題，有類似的答案應該工作，但它不適合我。我承認DOM遍歷不是我的強項，所以如果你有一個解決方案並且可以給出一些上下文，那真的會幫助我理解爲什麼其他解決方案不起作用。

我有一個按鈕和一個按鈕點擊（此按鈕只出現在手機上）的div，它應該只下滑當前的div內容。我可以得到這個工作，但問題是它打開了所有的divs內容。然而，我不能僅僅使用諸如$（this），$（next），$（prev）或$（find）等解決方案來打開特定卡。

我在下面發佈的代碼根本無法打開它，而我正在使用此版本的代碼，因爲它與Stack Overflow上的答案最相似。

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

 
\t }); 
 

 

 
    });

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

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

Answer 1

的主要問題是您如何使用jQuery的.next()和.find()。由於$(this)是<a> tag,.next()，它選擇下一個兄弟，是<p> tag。然後在<p> tag上調用.find()將檢查其所有後代，對此沒有任何後代。

因此，在使用.find（）遍歷之前，您需要選擇'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

1. 上缺少class="card>

2. 收盤"添加event到function()所以它的function(event)

3. 如果您不需要任何地方連接使用div，而不是一個a標籤，你將不需要0​​。

$('.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/