Question

抱歉，措辞混乱！我觉得这应该很容易解决，但是我遇到了很多麻烦。

in this website here我的手风琴可以打开和关闭以显示更多的学生内容。当手风琴打开时，标题内容消失，当它关闭时，标题内容返回。一切正常，直到我在页面下方打开另一只手风琴而没有先关闭最初的手风琴。

在这种情况下，第一个手风琴关闭了，但是/没有/将原始标题切换回默认位置，从而弄乱了布局。

$('.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”以外的任何东西，但是我不知道如何编写它。我只是无法把头缠住？

任何帮助表示赞赏〜

Answer 1

您可以使用触发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');
});

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

1 个答案: