Question

我有一个标签按钮。带有向上箭头和文本底部。单击选项卡时。该网站的标题被隐藏，箭头图标上下颠倒。

我也希望箭头改变它在html中的定位。

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

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

//

我的问题是：如何切换此功能。因此，如果再次单击 contentTab 。箭头恢复到原来的位置。我是否创建了if语句？我是 JS

的新手

谢谢！

Answer 1

由于您在元素上切换了一个类，如果它没有.triangle-up类，您只需使用:not() pseudo class选择.triangle-down：< / p>

Example Here

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

完整的代码段：

＆＃13;

$('.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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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是两个元素。

你如何切换insertBefore或InsertAfter？

3 个答案: