奇妙なCSSの位置右：0の問題

Question

私は大部分のために働く次のコードを持っています。しかし、常にそうではありません。私はそれを無駄に働かせようとするためにかなり多く手を加えました。問題は断続的に見えますが、間違いなく再現性があります。

このコードでは、ビューポート内のどこにあるかに応じて、項目の右または左に.menu divを配置し直します。アイテムの右端が途中のマークを過ぎている場合は、.menu divの辺が変更されます。

しかし、ウィンドウを数回置き換えて右側にある項目を選択すると、CSSがすぐに機能せず、要素が左側に配置されることがあります。

私のコードは何か間違っているのですか、他の誰かがこの問題を以前に見たことがありますか？誰もそれを修正する方法を知っていますか？コンソールの値によって、右が幅より大きいことがわかりますが、要素は依然として間違っています。

あなたは、CSSを削除していない

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

...私はまたalert()をチェックし、それは間違いなく右の時点でifになるだろう、だから、いくつかのショー/クローズ/リサイズ/ショーの繰り返しの後には、それはleft:0!importantとright:0!importantの両方を持っていますので、それは1つを選びます最も重要なものとして、おそらく最初に適用されたものです。

あなたがクラスを追加/削除ではなく、直接CSSを操作することによって、これを回避することができます（それはクラスを削除するにはreasierです）：

は、いくつかの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>