相同类的元素在单击另一个时闪烁

时间：2017-02-18 03:39:29

标签： jquery css

我有两个箭头可以打开和关闭两个不同的下拉菜单。当我点击左边的那个时，右边的箭头似乎是脉冲的。但是当我点击右边的那个时，左边的那个没有。这是什么原因？箭头闪烁：https://gyazo.com/d5024f1731105759e080967f1631c12c 

$(document).ready(function() {
  $('.selectMain').click(function(e) {
    menuNum = $(this).attr('menu');
    if ($(this).attr('active') == 'false') {
      $('[menu=' + menuNum + ']').attr('active', 'true');
      $(e.target).css({
        "border": "1px solid #ebebeb",
        "border-bottom": "none"
      });
    } else {
      $('[menu=' + menuNum + ']').attr('active', 'false');
      $(e.target).css({
        "border": "1px solid white"
      });
    }
    $('.NonMain' + '[menu=' + menuNum + ']').slideToggle('.DropShow');
    $("#arr" + menuNum).toggleClass("rotLeft rotRight");
  });
  $('.NonMain').click(function(e) {
    menuNum = $(this).attr('menu');
    $('[menu=' + menuNum + ']').attr('active', 'false');
    $('.selectMain[menu=' + menuNum + ']').css({
      "border": "1px solid white"
    })
    $("#arr" + menuNum).toggleClass("rotLeft rotRight");
    $('.NonMain' + '[menu=' + menuNum + ']').slideToggle('.DropShow');
    var ContentText = $(e.target).text();
    var MainText = $('.selectMain[menu=' + menuNum + ']').text();
    $('.selectMain[menu=' + menuNum + ']').text(ContentText);
    $(e.target).text(MainText);
  });
});
.arr {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  margin-right: 0.5em;
  position: absolute;
  -moz-transition: -moz-transform .3s;
  -webkit-transition: -webkit-transform .3s;
  -o-transition: -o-transform .3s;
  transition: transform .3s;
}

.rotLeft {
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.rotRight {
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.selectMain {
  border: 1px solid white;
  margin-top: 10px;
}

.MenuOne {
  right: 85px;
}

.MenuTwo {
  right: 215px;
}

.drop {
  display: block;
  position: absolute;
}

.DropDown {
  cursor: pointer;
  font-size: 24px;
  margin-right: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 110px;
  padding: 5px;
  border: 1px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arr rotLeft" id="arrtwo" style='right:240px;top:27px;z-index:100;'></div>
<div class='drop MenuTwo' menu='one' active="false">
  <div menu='two' active="false" class="selectMain DropDown">
    SubOne
  </div>
  <div menu='two' active="false" class="NonMain SubjectTwo DropDown" style='display: none;border:1px solid border: border: 1px solid #ebebeb; border-top: none;'>
    SubTwo
  </div>
</div>
<div class="arr rotLeft" id="arrone" style='right:110px;top:27px;z-index:100;'></div>
<div class='drop MenuOne' menu='one' active="false">
  <div menu='one' active="false" class="selectMain DropDown">
    SubOne
  </div>
  <div menu='one' active="false" class="NonMain DropDown" style='display: none;border:1px solid #ebebeb;border-top:none;border-bottom:none;'>
    SubTwo
  </div>
  <div menu='one' active="false" class="NonMain SubjectTwo DropDown" style='display: none;border:1px solid border: border: 1px solid #ebebeb; border-top: none;'>
    SubThree
  </div>
</div>

1 个答案:

答案 0 :(得分：2)

这与3d和2d引擎之间的渲染有所不同。您需要通过在这些类translateZ(0)，.arr＆amp;上设置.rotLeft来强制浏览器始终使用3d作为元素。 .rotRight。

$(document).ready(function() {
  $('.selectMain').click(function(e) {
    menuNum = $(this).attr('menu');
    if ($(this).attr('active') == 'false') {
      $('[menu=' + menuNum + ']').attr('active', 'true');
      $(e.target).css({
        "border": "1px solid #ebebeb",
        "border-bottom": "none"
      });
    } else {
      $('[menu=' + menuNum + ']').attr('active', 'false');
      $(e.target).css({
        "border": "1px solid white"
      });
    }
    $('.NonMain' + '[menu=' + menuNum + ']').slideToggle('.DropShow');
    $("#arr" + menuNum).toggleClass("rotLeft rotRight");
  });
  $('.NonMain').click(function(e) {
    menuNum = $(this).attr('menu');
    $('[menu=' + menuNum + ']').attr('active', 'false');
    $('.selectMain[menu=' + menuNum + ']').css({
      "border": "1px solid white"
    })
    $("#arr" + menuNum).toggleClass("rotLeft rotRight");
    $('.NonMain' + '[menu=' + menuNum + ']').slideToggle('.DropShow');
    var ContentText = $(e.target).text();
    var MainText = $('.selectMain[menu=' + menuNum + ']').text();
    $('.selectMain[menu=' + menuNum + ']').text(ContentText);
    $(e.target).text(MainText);
  });
});
.arr {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  margin-right: 0.5em;
  position: absolute;
  -moz-transition: -moz-transform .3s;
  -webkit-transition: -webkit-transform .3s;
  -o-transition: -o-transform .3s;
  transition: transform .3s;
  transform: translateZ(0);
}

.rotLeft {
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg)  translateZ(0);
}

.rotRight {
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)  translateZ(0);
}

.selectMain {
  border: 1px solid white;
  margin-top: 10px;
}

.MenuOne {
  right: 85px;
}

.MenuTwo {
  right: 215px;
}

.drop {
  display: block;
  position: absolute;
}

.DropDown {
  cursor: pointer;
  font-size: 24px;
  margin-right: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 110px;
  padding: 5px;
  border: 1px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arr rotLeft" id="arrtwo" style='right:240px;top:27px;z-index:100;'></div>
<div class='drop MenuTwo' menu='one' active="false">
  <div menu='two' active="false" class="selectMain DropDown">
    SubOne
  </div>
  <div menu='two' active="false" class="NonMain SubjectTwo DropDown" style='display: none;border:1px solid border: border: 1px solid #ebebeb; border-top: none;'>
    SubTwo
  </div>
</div>
<div class="arr rotLeft" id="arrone" style='right:110px;top:27px;z-index:100;'></div>
<div class='drop MenuOne' menu='one' active="false">
  <div menu='one' active="false" class="selectMain DropDown">
    SubOne
  </div>
  <div menu='one' active="false" class="NonMain DropDown" style='display: none;border:1px solid #ebebeb;border-top:none;border-bottom:none;'>
    SubTwo
  </div>
  <div menu='one' active="false" class="NonMain SubjectTwo DropDown" style='display: none;border:1px solid border: border: 1px solid #ebebeb; border-top: none;'>
    SubThree
  </div>
</div>

相关问题
最新问题