首页 文章

如何在AND手风琴上切换div内容，所以当一支手风琴关闭时，所有手风琴都会恢复默认状态？

提问于
浏览 次
0

抱歉令人困惑的措辞！我觉得这应该很容易修复，但我一直遇到很多麻烦 .

in this website here我有手风琴打开和关闭以显示更多的学生内容 . 当手风琴打开时， Headers 内容消失，当它关闭时， Headers 内容返回 . 这很好用，直到我在页面下面打开另一个手风琴而不先关闭最初的手风琴 .

在这种情况下，第一个手风琴关闭，但/没有/将原始 Headers 切换回默认值，弄乱了布局 .

$('.student-accord').find('.accord-toggle').click(function() {
    $(this).find(".accord-right").toggleClass("hide");
    $(this).find(".major").toggleClass("hide");
    $(this).next().slideToggle('fast');
    $(".student-accord-content").not($(this).next()).slideUp('fast');
});
$(".student-accord-header").hover(function() {
    $(this).closest(".student-accord").css("box-shadow", "0px 2px 9px 4px rgba(0, 0, 0, 0.08)");
}, function() {
    $(this).closest(".student-accord").css("box-shadow", "0px 2px 6px 1px rgba(0, 0, 0, 0.11)");
});
$(".nav a").click(function() {
    $(".nav a").removeClass("active");
    $(this).addClass("active");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="student-accord">
  <div class="student-accord-header accord-toggle">
      <div class="accord-left"> <img>
          <div class="major" id="m-vr">
          </div>
      </div>
      <div class="accord-right">
      </div>
  </div>
  <div class="student-accord-content">
  </div>
</div>

我需要.accordright和.major删除类隐藏，如果除了“this”之外的其他内容被点击，但我不知道如何编写它 . 我只是无法绕过它？

任何帮助赞赏〜

jquery accordion

1 回答

  • 0

    您可以通过触发 click 事件来标记打开的切换并关闭它们，而不是使用slideUp来关闭其他手风琴 .

    $('.student-accord').find('.accord-toggle').click(function() {
    var $toggle = $(this);
    var expanded = ($toggle.attr("data-expanded") || "false") === "false";
    $toggle.find(".accord-right").toggleClass("hide");
    $toggle.find(".major").toggleClass("hide");
    $toggle.attr("data-expanded", expanded).next().slideToggle('fast');
    if (expanded)
        $(".accord-toggle[data-expanded=true]").not($toggle).trigger('click');
});
    回复于

相关问题