单击 div 时向右和向上切换箭头答案

【问题标题】：Toggle Arrow right and up on click of a div单击 div 时向右和向上切换箭头
【发布时间】：2018-06-14 04:27:18
【问题描述】：

我正在设计一个类似手风琴的布局，并且希望在单击 div 时切换我显示的箭头图标。我可以切换 div 的内容。我想对箭头图标做同样的事情。

这是我迄今为止尝试过的。

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});

.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

<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/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

我希望在单击问题时将右侧图标切换为向下图标。当我再次单击时，它应该切换回左侧图标。由于它是一个常见问题页面，我将有多个问题和答案。所以我想为每个人做。

【问题讨论】：

只需删除类 fa-chevron-right 并将类 fa-chevron-down 添加到元素 <i class="fa"></i> - 当然是点击。

标签： javascript jquery html css

【解决方案1】：

虽然到目前为止所有的答案都很好，并且可以完成工作，但我建议您使用 one css state class 来完成所有样式。此外，我们应该尽可能地概括事物，以便解决方案可以轻松地应用于每个其他项目，因为手风琴非常普遍。

您可以放松 BEM 标准，但这不是必需的 --> http://getbem.com/introduction/

步骤如下：

每个手风琴项目都有一个包装器，并定义了文本和切换按钮
有一个 className 'active' || '打开' ||任何和样式（隐藏、显示、旋转等）文本并使用该类切换 btn，如下所示：.accordion-item.active .toggle-btn { your stlyes here }
使用 JS 通过单击切换 btn 在父级 (.accordion-item) 上添加切换类名称。

请在此处查看完整的工作示例 --> https://codepen.io/nikolamitic/pen/PEqqZa

HTML

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

  <li class="accordion-item">
    <div class="accordition-item__heading">
      <h3 class="accordition-item__title">Nikola je car</h3>
      <i class="accordion-item__btn"></i>
    </div>
    <div class="accordion-item__paragraph">
      <p>
        Brateee mooooj. Some random text goes here how awesome we all are. Yes we are and should aim from keeping it that way.
      </p>
    </div>
  </li>

</ul>

CSS

// default states
.accordion-item {
  &__paragraph {
    display: none;
  }
  &__btn {
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-plus-round-128.png');
    // You don't need to use bg image, you can use any what ever.
  }
}

// active states
.accordion-item--active {
  .accordion-item__paragraph {
    display: block;
  }
  .accordion-item__btn {
    background-image: url('http://cdn.onlinewebfonts.com/svg/img_161345.png');
  }
    // You don't need to use bg image, you can use apply any other css property ali transofrms or opacity or whaever.

}





// Example related styles - don't make an efort reading them

.accordion {
  width: 600px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.accordition-item__title {
  display: inline-block;
  margin: 0;
}

.accordion-item__btn {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    cursor: pointer;
}
.accordition-item {
  padding: 10px 0;
}

JS

const $accordionBtn = $('.accordion-item__btn');

$accordionBtn.on('click', (event) => {
  const $clickedAccordionItem = $(event.currentTarget).parents('.accordion-item');
  $clickedAccordionItem.toggleClass('accordion-item--active');
});

// So here we are using only one modifier and the rest of elemets needs to be modified with it using css with only two level nesting. It is per BEM so it is a safe.
// see --> http://getbem.com/naming/ section modifiers

【讨论】：

【解决方案2】：

您可以在.fa 上切换活动类以旋转带有动画的图标。

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(this).find(".fa").toggleClass('active');
  });
});

.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

.fa {
  transition: transform .2s;
}

.fa.active {
  transform: rotateZ(90deg);
}

<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/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

【讨论】：

通过变换，OP 可以为图标设置动画。
@AbhishekPandey - 尽管上面提到的所有答案都有效，但这给了我更多的动画灵活性。
这让我的答案不同，;)

【解决方案3】：

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(".fa-chevron-right").toggleClass("fa-chevron-down");
  });
});

.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

<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/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

    $(document).ready(function() {
      $(this).on("click", ".koh-faq-question", function() {
        $(this).parent().find(".koh-faq-answer").toggle();
        $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
      });
    });

    .koh-faqs-page-title {
      font-family: Nexa W01 Heavy;
      font-size: 30px;
      color: #04202E;
      font-weight: 700;
    }

    .koh-faq-question-span {
      font-family: Helvetica Neue LT Pro Roman !important;
      font-size: 16px !important;
      color: #000 !important;
      font-weight: 700 !important;
      display: inline-block;
    }

    .koh-faq-answer {
      font-family: Helvetica Neue LT Pro Roman;
      color: #000;
      font-weight: 400;
      display: none;
    }

    .icon {
      font-size: 10px;
      padding-right: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/1.9.1/jquery.min.js"></script>
    <div class="koh-tab-content">
      <div class="koh-tab-content-body">
        <div class="koh-faq">
          <div class="koh-faq-question">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
            <span class="koh-faq-question-span"> Test Question 1 </span>
          </div>
          <div class="koh-faq-answer">
            Test Answer 1
          </div>
        </div>
      </div>
    </div>

【讨论】：

【解决方案5】：

只需将fa-chevron-right 类切换为fa-chevron-down 类。我已将$('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" ); 这一行和chevron id 添加到i 标签。

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $('#chevron').toggleClass( "fa-chevron-right" ).toggleClass( "fa-chevron-down" );
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});

.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

<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/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" id="chevron" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

【讨论】：