javascript - 奇怪的 CSS 位置正确 :0 issue

Question

我有以下大部分代码都可以使用。然而并非总是如此。我已经摆弄了很多尝试让它无济于事。这个问题似乎是间歇性的，但它绝对可以重现。

此代码试图做的是将 .menu div 重新定位到元素的右侧或左侧，具体取决于它在视口(viewport)中的位置。如果元素的右边缘超过中间标记，它会更改 .menu div 的一侧。

但是，在重新定位窗口几次并选择右侧的元素后，有时 CSS 似乎无法立即工作，而是将元素定位在左侧。

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

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

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

.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;
}

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

Answer 1

你没有删除 css，所以在几次显示/关闭/调整大小/显示迭代之后，它同时具有 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>