Question

我正在尝试使用向上和向下箭头创建一个jQuery手风琴。为此，我正在使用字体上下角度。当手风琴关闭时会显示向下箭头，手风琴打开时会显示向上箭头。但唯一的问题是它只有在用户点击特定的手风琴标题时才有效。当用户点击另一个标题时，箭头不会改变。

＆＃13;

var toggleHeader = $('.toggle-header');
var toggleContent = $('.toggle-content');

toggleHeader.click(function() {
  toggleHeader.removeClass('active');
  $(this).addClass('active');
  $(this).find('.toggle-arrow-down').hide();
  $(this).find('.toggle-arrow-up').show();

  if ($(this).next('div').is(':visible')) {
    $(this).next('div').slideUp();
    $(this).find('.toggle-arrow-down').show();
    $(this).find('.toggle-arrow-up').hide();
  } else {
    toggleContent.slideUp();
    $(this).next('div').slideDown();
  }

  return false;
});

＆＃13;

.toggle-header {
  border: 1px solid #ccc;
  padding: 10px;
  position: relative;
}

.toggle-header.active {
  background: #ccc;
}

.toggle-header .toggle-switch {
  position: absolute;
  top: 10px;
  right: 20px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
  <div class="toggle-header">
    <h3> This is toggle title </h3>
    <div class="toggle-switch">
      <i class="fa fa-angle-up arrow-up"></i>
      <i class="fa fa-angle-down arrow-down"></i>
    </div>
    <div class="toggle-content">
      This is the paragraph
    </div>
    <div class="toggle">
      <div class="toggle-header">
        <h3> This is toggle title </h3>
        <div class="toggle-switch">
          <i class="fa fa-angle-up arrow-up"></i>
          <i class=" fa fa-angle-down arrow-down"></i>
        </div>
        <div class="toggle-content">
          This is the paragraph
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您需要在点击事件中找到要更改的有效项目，然后进行更改。你可以使用：

var active = $(this).find(".active");

在您的点击功能中（$(this)为$('.toggle-header')），然后使用箭头和活动状态等执行任何操作。

例如active.removeClass("active").slideUp().find(".toggle-arrow-up").hide();等等。

然而，我认为你所使用的路径可能不是最强大的。我强烈建议您查看Ridiculously simple accordion 编写示例，其中列出了最简单的手风琴（html，css和script），作为构建所需额外功能的起点非常有用。

手风琴上下箭头

1 个答案: