JQuery/CSS 隐藏 cookie 横幅

Question

我有一个简单的 cookie 横幅：

  <div id="cookie-consent" class="cookie-consent">
      <span>This site uses cookies to enhance user experience. see <a href="..." target="_blank" class="ml-1 text-decoration-none">Privacy policy</a> </span>
      <div  class="mt-2 d-flex align-items-center justify-content-center g-2">
        <button id="cookie-ok-button" class="cookie-allow-button mr-1">I'm aware</button>            
      </div>          
    </div>

当用户单击“确定”按钮时，我使用 jquery 隐藏横幅：

$(document).ready(function()
{

if (window.localStorage.getItem('accept_cookies'))
{
    $('#cookie-consent').css('display','none');
}

$("#cookie-ok-button").click(function()
{              
    $('#cookie-consent').fadeOut();
    $('#cookie-consent').css('display','none');
    window.localStorage.setItem('accept_cookies', true);              
}); 
});

它可以工作，但有时在 Chrome 上，横幅会出现然后迅速消失。我可以做任何修改来避免这种行为吗？

Answer 1

不要默认显示横幅并有条件地隐藏它，而是默认隐藏它并有条件地显示它。

例如：

<div id="cookie-consent" class="cookie-consent" style="display:none;">
  <!--- etc. -->
</div>

和：

$(document).ready(function()
{
  if (!window.localStorage.getItem('accept_cookies'))
  {
    $('#cookie-consent').css('display','block');
  }

  // etc.
});