奇怪的CSS位置：0问题

Question

我有以下代码，大部分都有效。但并非总是如此。我试图让它工作无济于事。这个问题似乎是间歇性的，但它绝对可以重现。

此代码尝试执行的操作是将.menu div重新定位到项目的右侧或左侧，具体取决于视口中的位置。如果项目的右边缘超过了中间标记，则会更改.menu div的边。

然而，在重新定位窗口几次并选择右侧的项目之后，似乎有时CSS不能立即工作并且它将元素定位在左侧。

我的代码是做错了还是其他人以前见过这个问题？有谁知道如何修理它？您可以通过控制台值看到右侧大于宽度，但是元素仍然定位错误。

我还使用alert()进行了检查，并且它肯定会在正确的位置进入if ...

＆＃13;

＆＃13;

$(document).ready(function() {
  $(document).on("click", ".item", function(event) {
    var widthCenter = window.innerWidth / 2;
    var rightPos = $(this)[0].getBoundingClientRect().right;
    console.log("width center:", widthCenter);
    console.log("right", rightPos);

    if (rightPos > widthCenter)
      $(this).children(".menu").css("right", "0", "!important");
    else
      $(this).children(".menu").css("left", "0", "!important");

    var showingMenu = false;
    if ($(this).children(".menu").is(':visible'))
      showingMenu = true;
    $(".menu").hide();
    if (showingMenu)
      $(this).children(".menu").hide();
    else
      $(this).children(".menu").show();
  });
});

＆＃13;

.container1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-width: 1px;
  border-style: solid;
}
.item {
  position: relative;
  width: 60px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  margin: 20px;
}
.menu {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  top: 100%;
  margin: 0;
  padding: 0;
  z-index: 100;
  border-width: 1px;
  border-style: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你没有删除css，所以在几次show / close / resize / show迭代之后，它同时有left:0!important和right:0!important所以（我猜）它选择了一个很重要，可能是应用的第一个。

你可以通过添加/删除类来解决这个问题，而不是直接操作css（删除一个类更加容易）：

添加一些css：

.left { left:0!important }
.right { right:0!important }

并切换课程：

    if (rightPos > widthCenter)
      $(this).children(".menu").addClass("right").removeClass("left");
    else
      $(this).children(".menu").addClass("left").removeClass("right");

$(document).ready(function() {
  $(document).on("click", ".item", function(event) {
    var widthCenter = window.innerWidth / 2;
    var rightPos = $(this)[0].getBoundingClientRect().right;
    console.log("width center:", widthCenter);
    console.log("right", rightPos);

    if (rightPos > widthCenter)
      $(this).children(".menu").addClass("right").removeClass("left");
    else
      $(this).children(".menu").addClass("left").removeClass("right");

    var showingMenu = false;
    if ($(this).children(".menu").is(':visible'))
      showingMenu = true;
    $(".menu").hide();
    if (showingMenu)
      $(this).children(".menu").hide();
    else
      $(this).children(".menu").show();
  });
});

.container1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-width: 1px;
  border-style: solid;
}
.item {
  position: relative;
  width: 60px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  margin: 20px;
}
.menu {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  top: 100%;
  margin: 0;
  padding: 0;
  z-index: 100;
  border-width: 1px;
  border-style: solid;
}
.left { left:0!important }
.right { right:0!important }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
  <span class="item">item<div class="menu"></div></span>
</div>