При щелчке только один аккордеон должен открыть

Question

, когда я нажимаю на красный ящик, все открытые «.community-sub-row» открываются, я хочу, когда я нажимаю на красную рамку только одну «.community-sub-row», открытую одновременно и другие должны закрыться. Заранее спасибо. И в красном поле я использовал стрелку-право и стрелку вниз класс переключения.

$(document).ready(function(){ 
    $(".community-sub-row").hide(); 

    $(".community-toggle-arrow").click(function(){ 
    $(".community-sub-row").slideToggle(); 
    $(".community-toggle-arrow span").toggleClass("ion-arrow-right-b"); 
    }); 
}); 

DEMO HERE

Answer 1

Используйте следующее. Используйте closest(), чтобы получить родительскую строку, а затем отобразить/скрыть элементы.

$(document).ready(function() { 
    $(".community-sub-row").hide(); 
    $(".community-toggle-arrow").click(function() { 
    var that = this; 
    if(!$(that).hasClass('progress')){ 
     $(that).addClass('progress'); 
     $thisRows = $(that).closest('.community-row').find(".community-sub-row"); 
     $(".community-sub-row").not($thisRows).slideUp(); 
     $thisRows.slideToggle(function(){ 
      $(that).removeClass('progress'); 
     }); 
     $(that).find("span").toggleClass("ion-arrow-down-b ion-arrow-right-b"); 
    } 
    }); 
}); 

DEMO

Answer 2

Вы должны дать уникальный id для каждого .community-toggle-arrowdiv у вас есть, чтобы специфичны, что Див вы щелкнули и должны показать.

Answer 3

Вам необходимо переключить элемент community-sub-row в пределах того же community-row.

использовать также правило CSS, чтобы установить состояние отображения по умолчанию community-sub-row

$(document).ready(function() { 
 
    var $subs = $(".community-sub-row"); 
 

 
    $(".community-toggle-arrow").click(function() { 
 
    var $sub = $(this).closest('.community-row').find(".community-sub-row").stop(true).slideToggle(); 
 
    $subs.not($sub).stop(true).slideUp(); 
 
    }); 
 
});

.clearfix:after { 
 
    clear: both; 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 
.clearfix { 
 
    display: inline-block; 
 
} 
 
.clearfix { 
 
    display: block; 
 
} 
 
.community-row { 
 
    border-bottom: 1px solid #000000; 
 
    padding: 10px; 
 
    min-height: 60px; 
 
    overflow: hidden; 
 
    font-size: 13px; 
 
} 
 
.community-row .community-wrap { 
 
    position: relative; 
 
} 
 
.community-row .community-wrap .community-toggle-arrow { 
 
    float: left; 
 
    font-size: 16px; 
 
    width: 12px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    margin-right: 5px; 
 
    color: #2385ca; 
 
    cursor: pointer; 
 
    background: red; 
 
} 
 
.community-row .community-wrap .community-icon { 
 
    float: left; 
 
} 
 
.community-row .community-wrap .community-icon img { 
 
    width: 40px; 
 
    margin-right: 5px; 
 
    float: left; 
 
} 
 
.community-row .community-wrap .community-title { 
 
    float: left; 
 
    width: 60%; 
 
} 
 
.community-row .community-wrap .community-title a { 
 
    width: 100%; 
 
    line-height: 18px; 
 
} 
 
.community-row .community-wrap .noti-indicator { 
 
    float: right; 
 
    padding: 0px 5px; 
 
    color: #2385ca; 
 
    border: 1px solid #2385ca; 
 
    float: right; 
 
    margin-top: 8px; 
 
    line-height: 20px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
} 
 
.community-row .community-sub-row { 
 
    padding: 0 0 0 17px; 
 
} 
 
.community-row .community-sub-row .community-wrap { 
 
    margin-top: 10px; 
 
} 
 
.community-row .community-sub-row { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="community-row"> 
 
    <div class="community-wrap clearfix"> 
 
    <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> 
 
    </div> 
 
    <div class="community-icon"> 
 
     <img src="assets/img/community_sjsu_lg.jpg" /> 
 
    </div> 
 
    <div class="community-title"><a href="#">Mechanical Engineering (SJSU)</a> 
 
    </div> 
 
    <div class="noti-indicator">5</div> 
 
    </div> 
 
    <div class="community-sub-row clearfix"> 
 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_mech_sys.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Mechanical Systems</a> 
 
     </div> 
 
     <div class="noti-indicator">5</div> 
 
    </div> 
 

 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_coding.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Front-end Coding</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="community-row"> 
 
    <div class="community-wrap clearfix"> 
 
    <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> 
 
    </div> 
 
    <div class="community-icon"> 
 
     <img src="assets/img/community_tesla_sm@2x.jpg" /> 
 
    </div> 
 
    <div class="community-title"><a href="#">Tesla Motors</a> 
 
    </div> 
 
    <div class="noti-indicator">20</div> 
 
    </div> 
 
    <div class="community-sub-row clearfix"> 
 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_mech_sys.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Mechanical Systems</a> 
 
     </div> 
 
     <div class="noti-indicator">5</div> 
 
    </div> 
 

 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_coding.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Front-end Coding</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="community-row"> 
 
    <div class="community-wrap clearfix"> 
 
    <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> 
 
    </div> 
 
    <div class="community-icon"> 
 
     <img src="assets/img/community_foothill_sm@2x.jpg" /> 
 
    </div> 
 
    <div class="community-title"><a href="#">Foothill College</a> 
 
    </div> 
 
    </div> 
 
    <div class="community-sub-row clearfix"> 
 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_mech_sys.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Mechanical Systems</a> 
 
     </div> 
 
     <div class="noti-indicator">5</div> 
 
    </div> 
 

 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_coding.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Front-end Coding</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Существовали несколько вещей, пропавших без вести в вашем коде аккордеона, который я закрепилась ниже.

• При нажатии на стрелку, аккордеон должен расширить только текущий список и не все, это можно сделать, обратившись к текущим элементов родителя, а затем извлечение к потомкам элемента .community-sub-row.
• Аккордеонный список не был разрушен при загрузке, вместо этого это происходило на document.ready(), что было не очень хорошо, поэтому я добавил стиль CSS, чтобы скрыть список по умолчанию.
• При нажатии на аккордеон он должен был свернуть весь существующий аккордеон первым, прежде чем расширять текущий.

JS КОД:

$(document).ready(function() { 
    $(".community-toggle-arrow").click(function() { 
    //collapse all accordion before toggling except current 
    $('.community-sub-row').not(this).slideUp(); 
    $(this).closest('.community-row').find(".community-sub-row").slideToggle(); 
    $(this).find("span").toggleClass("ion-arrow-right-b"); 
}); 
}); 

CSS:

.community-row .community-sub-row { 
    padding: 0 0 0 17px; 
    display:none; //to hide all accordion on load 
} 

Live Demo @ JSFiddle