奇怪的CSS位置權：0問題

Question

我有以下大部分代碼都可以使用。 但是並非總是如此。 我花了很多時間嘗試使它無濟於事。 這個問題似乎是斷斷續續的，但是絕對可以重現。

此代碼嘗試執行的操作是根據項目在視口中的位置，將.menu div重新定位在.menu的右側或左側。 如果項目的右邊緣超過中途標記，它將更改.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，因此在幾次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>