Khi nhấp vào chỉ một accordion sẽ mở

Question

khi tôi nhấp vào hộp màu đỏ tất cả ".community-sub-row" mở, tôi muốn khi tôi nhấp vào hộp màu đỏ chỉ có một ".community-sub-row" shoud mở cùng một lúc và khác nên đóng. Cảm ơn trước. Và trong hộp màu đỏ tôi đã sử dụng lớp chuyển đổi mũi tên phải và mũi tên xuống.

$(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

Sử dụng như sau. Sử dụng closest() để nhận hàng gốc và sau đó hiển thị/ẩn các mục.

$(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

Bạn cần phải cung cấp một độc đáo id cho mỗi .community-toggle-arrowdiv bạn có, để cụ thể mà div bạn nhấp chuột phải và phải hiển thị.

Answer 3

Bạn cần phải chuyển đổi phần tử community-sub-row trong cùng một community-row.

Cũng sử dụng một quy tắc css để thiết lập trạng thái hiển thị mặc định của 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

Có vài điều còn thiếu trong mã accordion của bạn, mà tôi đã cố định bên dưới.

• Khi nhấp vào mũi tên, accordion có để mở rộng chỉ trong danh sách hiện tại và không phải tất cả, điều này có thể được thực hiện bằng cách giới thiệu đến các yếu tố hiện tại cha mẹ và sau đó lấy các yếu tố hậu duệ .community-sub-row.
• Danh sách phù hợp không bị thu gọn khi tải, thay vào đó nó xảy ra trên document.ready(), điều này không tốt, vì vậy tôi đã thêm kiểu CSS để ẩn danh sách theo mặc định.
• khi được nhấp vào accordion, nó phải thu gọn tất cả các accordion hiện tại trước khi mở rộng hiện tại.

JS Mã sản phẩm:

$(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