スライドトグルがアクティブにならない

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（）を使用して横断する前に、「カードトップ」と「カードボトム」の両方の親を選択する必要があります。例えば

：（）を.parentする

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

最初の呼び出しが'card-top' divある<a>タグの親となり、それの.parent（）は'card' divあろう。その後、.find()を呼び出すと動作します。あなたはどこにもリンクする必要はありませんので、もしそれがfunction(event)

をだeventfunction()に追加class="card>

終値"が欠落してい

http://www.bootply.com/UMwXaOILHv

は

Answer 2

1. の代わりに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 -->

あなたがでpreventDefault（）を使用するように関数に `event`を渡す必要がありフィドル

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