Как использовать toggleClass fuction в нескольких местах?

Question

Я не знаю, как сделать все текстовое шоу, когда нажата стрелка вниз. вот что я пробовал, он работает только для одного текстового поля, но когда я делаю 2 или более из них, он не работает?

ТОТ, ЧТО РАБОТАЕТ

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>

это работает только для одного текстового поля, но когда я сделать 2 или более из них, он не работает?

ТОТ Doesnt ОРК

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 - они предназначены быть специфическими для одного элемента. При этом я бы переключил box-toggle на класс, а не на идентификатор, а также удалил 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

Ну первый вопрос я месте здесь вы используете один и тот же идентификатор на несколько элементов. Вот почему последняя стрелка вниз - единственная, которая, похоже, работает.

Причина: это последний элемент, который соответствует идентификатору, который вы ищете в своем HTML-коде. Вы можете использовать классы вместо этого и приложить JQuery каждый цикл, чтобы применить щелчок слушателя к каждому из элементов

Try это:

// 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'); 
    }); 
} 

что вы должны получить результат, который вы ищете.

Вы также должны перестроить свой html. Несколько элементов с одинаковыми идентификаторами не являются хорошей практикой и могут вызывать много головных болей.