jqueryスライドをシングルインスタンスのみに表示しますか？

Question

あなたの考えを共有するをクリックすると、それぞれのインスタンスのコメントブロックがスライドします。私が望むのは、特定のセクションだけでなくすべてではなくなるということです。以下は私のコードのスニペットです。 実際に私はすべてのセクションをPHPを使って動的に作成しています。私のページにはほぼ10-15のセクションがあり、特定のセクションをクリックしてもコメントブロックは各セクションごとにダウンしています。 これは可能です。私のページにあるセクションの数にかかわらず、ボタンをクリックすると、単一のブロックだけが下にスライドします。

$('.down').click(function() { 
 

 
    // Set the effect type 
 
    var effect = 'slide'; 
 

 
    // Set the options for the effect type chosen 
 
    var options = { direction: 'up' }; 
 

 
    // Set the duration (default: 400 milliseconds) 
 
    var duration = 700; 
 
     
 

 
\t $('.card').toggle(effect, options, duration); 
 
});

#comments{ 
 
     background-color: #535d92; 
 
     display: none; 
 
     height:60px; 
 
      } 
 

 
#slide { 
 
    width: 90%; 
 
    margin-top: 14px; 
 
    margin-left: 14px; 
 
\t z-index:1; 
 
    border: none; 
 
\t border-radius: 2.5em; 
 
\t background: #fff; 
 
\t -webkit-appearance: none; 
 
    outline:none; 
 
\t padding: 0.85em 1.5em; 
 
\t height:10%; 
 
     } 
 

 
.cd-container { 
 
     width: 90%; 
 
     margin: 0 auto; 
 
       } 
 

 
.post-footer ul {list-style:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<div class="container"> 
 
    <section class="cd-container"> 
 
    <div class="cd-timeline-content"> 
 
    <h3>raghav</h3> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur       adipisicing elit.</p> 
 
\t <div class="post-footer"> 
 
\t <ul> 
 
\t <li class="down"><a href="#">Share your thoughts</a></li> 
 
\t </ul> \t 
 
\t </div> 
 
\t </div><br/> 
 
\t \t <div id="comments" class="card"> 
 
\t \t <input type="text" id="slide" placeholder="Hit Enter to   Send!" class="boom"/> 
 
     </div> 
 
    </section> <!-- cd-timeline --><br> 
 
\t \t \t \t \t \t \t 
 
<section class="cd-container"> 
 
    <div class="cd-timeline-content"> 
 
    <h3>sharad</h3> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur       adipisicing elit.</p> 
 
\t <div class="post-footer"> 
 
\t <ul> 
 
\t <li class="down"><a href="#">Share your thoughts</a></li> 
 
\t </ul> \t 
 
    </div> 
 
\t </div><br/> 
 
\t <div id="comments" class="card"> 
 
    <input type="text" id="slide" placeholder="Hit Enter to   Send!" class="boom"/> 
 
\t </div> 
 
</section> 
 
</div>

Answer 1

1. のみをクリック share your thoughts要素の同じセクション内.cardを活性化させます。手順：

   はセクションが動的であることを、あなたの第二の懸念に対処するために、また

   $(this).parents('section.cd-container').find('.card').toggle 
   

2. で

   $('.card').toggle 
   

   を交換してください。 ajaxを使用するなど、ページロード後にセクションがロードされた場合は、単にのコンフリクトをコンテナ の要素またはドキュメントに変更し、クリックを委譲させます。手順：

   が

   $(".container").on("click", ".down", function() { 
   

3. と

   $(".down").click(function() { 
   

   を交換してください私はあなたが でid="comments"あなたのHTMLとの複数の要素を持っていることに気づきました。これは有効ではありません。 のDOM要素の名前は一意である必要があります。id私はあなたがクラスにそれを変更示唆して CSSでHERE .comments

SEE実施例に#commentsためのルールを変更したい：

$(".container").on("click", ".down", function() { 
 

 
    // Set the effect type 
 
    var effect = 'slide'; 
 

 
    // Set the options for the effect type chosen 
 
    var options = { 
 
    direction: 'up' 
 
    }; 
 

 
    // Set the duration (default: 400 milliseconds) 
 
    var duration = 700; 
 

 
    $(this).parents('section.cd-container').find('.card').toggle(effect, options, duration); 
 
});

#comments { 
 
    background-color: #535d92; 
 
    display: none; 
 
    height: 60px; 
 
} 
 
#slide { 
 
    width: 90%; 
 
    margin-top: 14px; 
 
    margin-left: 14px; 
 
    z-index: 1; 
 
    border: none; 
 
    border-radius: 2.5em; 
 
    background: #fff; 
 
    -webkit-appearance: none; 
 
    outline: none; 
 
    padding: 0.85em 1.5em; 
 
    height: 10%; 
 
} 
 
.cd-container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
.post-footer ul { 
 
    list-style: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<div class="container"> 
 
    <section class="cd-container"> 
 
    <div class="cd-timeline-content"> 
 
     <h3>raghav</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
     <div class="post-footer"> 
 
     <ul> 
 
      <li class="down"><a href="#">Share your thoughts</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <br/> 
 
    <div id="comments" class="card"> 
 
     <input type="text" id="slide" placeholder="Hit Enter to   Send!" class="boom" /> 
 
    </div> 
 
    </section> 
 
    <!-- cd-timeline --> 
 
    <br> 
 

 
    <section class="cd-container"> 
 
    <div class="cd-timeline-content"> 
 
     <h3>sharad</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
     <div class="post-footer"> 
 
     <ul> 
 
      <li class="down"><a href="#">Share your thoughts</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <br/> 
 
    <div id="comments" class="card"> 
 
     <input type="text" id="slide" placeholder="Hit Enter to   Send!" class="boom" /> 
 
    </div> 
 
    </section> 
 
</div>

Answer 2

あなたは親要素を見つけて、コメントセクションの検索を行う必要があります。

$(document).on('click', '.down', function() { 
    //find the parent 
    var $parent = $(this).parents('.cd-container');  

    // Set the effect type 
    var effect = 'slide'; 

    // Set the options for the effect type chosen 
    var options = { direction: 'up' }; 

    // Set the duration (default: 400 milliseconds) 
    var duration = 700; 

    $parent.find('.card').toggle(effect, options, duration); 
}); 

私は、彼らは道あなたがそれを結合したため、また、それはページのロード時に一度だけあり、動的に追加された要素を上のトリガしないだろう、クリックハンドラを変更し、また行くために良い習慣を作ります.click()から離れ、代わりに.on('click')を使用してください。

$(document).on('click', '.down', function() { 
    //code here 
});