複数の場所でtoggleClass fuctionを使用する方法は？

Question

下向きの矢印がクリックされたときにテキスト全体を表示する方法はわかりません。ここで私が試したのは、1つのテキストボックスだけで動作しますが、2つ以上を作ったときには動かないのですか？

それだけで1つのテキストボックスのために動作しますが、私はそれらの2以上を作るとき、それは仕事をdoesnt

body{ 
 
    background-color: dimgray; 
 
} 
 
.box{ 
 
    padding: 10px; 
 
    border-bottom: 0.1px solid #dadada; 
 
    width: 700px; 
 
    background-color: #fff; 
 
} 
 
.box-content{ 
 
    height: 30px; 
 
    overflow: hidden; 
 
    transition: 0.3s; 
 
} 
 
.box-expand{ 
 
    height: auto !important;  
 
} 
 
    
 
.box-opt{ 
 
    float: right; 
 
} 
 
.box-opt a{ 
 
    text-decoration: none; 
 
    font-size: 70%; 
 
    color: #646464; 
 
    display: inline-block; 
 
    padding: 5px; 
 

<script src="https://use.fontawesome.com/e74aa8f5bb.js"></script> 
 

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

 

 
<div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    <script> 
 
     $("#box-toggle").click(function (e) { 
 
      e.preventDefault(); 
 
      $(".box-content").toggleClass("box-expand"); 
 
     }); 
 
    </script>

ワークスONE？

ONEのdoesntのORK

body{ 
 
    background-color: dimgray; 
 
} 
 
.box{ 
 
    padding: 10px; 
 
    border-bottom: 0.1px solid #dadada; 
 
    width: 700px; 
 
    background-color: #fff; 
 
    margin: 10px; 
 
} 
 
.box-content{ 
 
    height: 30px; 
 
    overflow: hidden; 
 
    transition: 0.3s; 
 
} 
 
.box-expand{ 
 
    height: auto !important;  
 
} 
 
    
 
.box-opt{ 
 
    float: right; 
 
} 
 
.box-opt a{ 
 
    text-decoration: none; 
 
    font-size: 70%; 
 
    color: #646464; 
 
    display: inline-block; 
 
    padding: 5px; 
 

<script src="https://use.fontawesome.com/e74aa8f5bb.js"></script> 
 

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

 

 
<div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    <script> 
 
     $("#box-toggle").click(function (e) { 
 
      e.preventDefault(); 
 
      $(".box-content").toggleClass("box-expand"); 
 
     }); 
 
    </script> 
 
    
 
</div><div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    <script> 
 
     $("#box-toggle").click(function (e) { 
 
      e.preventDefault(); 
 
      $(".box-content").toggleClass("box-expand"); 
 
     }); 
 
    </script> 
 
    
 
</div><div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    <script> 
 
     $("#box-toggle").click(function (e) { 
 
      e.preventDefault(); 
 
      $(".box-content").toggleClass("box-expand"); 
 
     }); 
 
    </script> 
 
    
 
</div><div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    <script> 
 
     $("#box-toggle").click(function (e) { 
 
      e.preventDefault(); 
 
      $(".box-content").toggleClass("box-expand"); 
 
     }); 
 
    </script> 
 
    
 
</div>

Answer 1

あなたは同じIDで複数の要素を持つべきではない - 彼らは一つの要素に固有であることを意味しています。つまり、私はボックストグルをIDではなくクラスに変更し、ボックス上のid = "box-content"も削除します。

$('.box-toggle').click(function(e){ 
e.preventDefault(); 
$(this).parents('.box').find('.box-content').toggleClass('box-expand'); 
}); 

あなたが以内にクリックしているだけのボックスをターゲットにしているその方法：一度だけ行います - あなたはまた、一つ一つのボックスの後にスクリプトを配置する必要はありません。まあ

body{ 
 
    background-color: dimgray; 
 
} 
 
.box{ 
 
    padding: 10px; 
 
    border-bottom: 0.1px solid #dadada; 
 
    width: 700px; 
 
    background-color: #fff; 
 
    margin: 10px; 
 
} 
 
.box-content{ 
 
    height: 30px; 
 
    overflow: hidden; 
 
    transition: 0.3s; 
 
} 
 
.box-expand{ 
 
    height: auto !important;  
 
} 
 
    
 
.box-opt{ 
 
    float: right; 
 
} 
 
.box-opt a{ 
 
    text-decoration: none; 
 
    font-size: 70%; 
 
    color: #646464; 
 
    display: inline-block; 
 
    padding: 5px; 
 

<script src="https://use.fontawesome.com/e74aa8f5bb.js"></script> 
 

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

 

 
<div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    
 
</div><div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    
 
</div><div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    
 
</div><div class="box"> 
 
    
 
    <div class="box-opt"> 
 
     <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> 
 
    </div> 
 
    
 
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>   
 
        
 
    <script> 
 
     $('.box-toggle').click(function(e){ 
 
e.preventDefault(); 
 
$(this).parent().parent().find('.box-content').toggleClass('box-expand'); 
 
}); 
 
    </script> 
 
    
 
</div>

Answer 2

私はここで見つける最初の問題は、複数の要素に同じIDを使用しています。最後の下向きの矢印が働くように思われるのはなぜでしょうか。

理由 - あなたのHTMLで探しているIDと一致するのは、最後の要素です。あなたが探している結果を得る必要があることを

// Iterate over each '.box' class found 
// Inside the Each function we can add parameters that help 
// us identify the elements we are dealing with 

jQuery('.box').each(function(i,e)) 
{ 
    // Make '.box' into a jQuery object that we can use 
    t = jQuery(e); 

    // Look for the toggle inside current box 
    currentToggle = t.find('.box-opt > a'); 

    // Find box content to add class to 
    textContainer = t.find('.box-content'); 

    // Apply the click listener to **EACH** element 
    currentToggle.on('click',function(e){ 

     // Stop the browser from adding a '#' to the url and causing the 
     // window to jump up 
     e.preventDefault(); 
     textContainer.toggleClass('box-expand'); 
    }); 
} 

： あなたは

これを試してみてください要素のそれぞれにクリックリスナを適用するには、各ループを代わりにクラスを使用するとjQueryを添付できます。

また、HTMLを再構成する必要があります。 同じIDを持つ複数の要素は良い練習ではなく、頭痛の原因となります。