你如何切换插入之前或插入之后

Question

>我有一个选项卡按钮。带有向上的箭头和下方的文字。单击选项卡时。站点的标题处于隐藏状态，箭头图标将颠倒。

我还希望箭头更改其在 html 中的位置。

我可以使用以下脚本很好地完成此操作：

<script>    
    $('.contentTab').on('click', function(e) {
      $('.mainContent').toggleClass("closeHeader");
      $('.triangle-up').toggleClass("triangle-down");
      $(".triangle-down").insertAfter(".contentTab h1")
      e.preventDefault();
    });
</script>

//

我的问题是：如何切换此功能。这样，如果再次单击内容选项卡。箭头将恢复到其旧位置。我是否创建 if 语句？我对JS很陌生

谢谢！

Answer 1

由于您正在元素上切换类，因此如果它没有.triangle-down类，您可以简单地使用 :not() 伪类来选择.triangle-up：

这里的例子

$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");

完整代码片段：

$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.triangle-up').toggleClass("triangle-down");
  $(".triangle-down").insertAfter(".contentTab h1");
  $(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
  e.preventDefault();
});

h1 {
  display: inline-block;
}
.triangle-down {
  color: #f00;
  display: inline-block;
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentTab">
  <span class="triangle-up">▲</span>
  <h1>Content tab header</h1>
</div>

Answer 2

$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.triangle-up').toggleClass("triangle-down");
  if(!$('.triangle-up').hasClass("triangle-down")){
      $(".triangle-down").insertAfter(".contentTab h1");
  }else{
      // put it back wherever it was before
      $(".triangle-down").insertAfter(...where ever it was before..);
  }
  e.preventDefault();
});

Answer 3

<script>    
    $('.contentTab').on('click', function(e) {
        $('.mainContent').toggleClass("closeHeader");
        if ($('.mainContent').hasClass("closeHeader")){
            $('.triangle-up').hide();
            $(".triangle-down").show();
        }else {
            $('.triangle-up').show();
            $(".triangle-down").hide();
        }
        e.preventDefault();
    });
</script>

前提是.triangle-up和.triangle-down是两个要素。