点击后只能打开一个手风琴

时间：2016-03-31 06:25:57

标签： jquery

当我点击红色框全部＆＃34; .community-sub-row＆＃34;打开，我想当我点击红色框时只有一个＆＃34; .community-sub-row＆＃34;一次打开，其他应该关闭。提前致谢。在红色框中，我使用了向右箭头和向下箭头切换类。

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

4 个答案:

答案 0 :(得分：2)

使用以下内容。使用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

答案 1 :(得分：1)

您需要在同一community-sub-row内切换community-row元素。

还可以使用css规则来设置community-sub-row

的默认显示状态

＆＃13;
＆＃13; 
$(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();
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您的手风琴代码中缺少一些内容，我已在下面修改过。

  • 当点击箭头时，accordion必须只扩展当前列表而不是全部，这可以通过引用当前元素parent然后获取后代元素.community-sub-row来完成。
  • 手风琴列表在加载时没有折叠，而是发生在document.ready()上，这不好，所以我添加了一种CSS样式来默认隐藏列表。
  • 当点击手风琴时，它必须首先折叠所有现有的手风琴，然后再扩展当前的手风琴。

JS CODE： 

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

答案 3 :(得分：0)

您需要为您拥有的每个id .community-toggle-arrow提供一个唯一的div，以及您点击并必须显示的特定div。

相关问题
最新问题