隐藏 div - 为什么它不起作用？答案

【问题标题】：Hide a div - Why it's not working?隐藏 div - 为什么它不起作用？
【发布时间】：2013-09-15 06:33:18
【问题描述】：

我正在尝试使用jquery-cookie 来处理最近的欧盟 cookie 法律。一切正常，但是我想根据不同的设备显示不同的 cookie“警告”消息。

<div class="cookiepopup mobile_no">
        <p>Questo sito utilizza i cookie, per garantire una migliore esperienza di navigazione. Continuando, ne accetti l'utilizzo.<br /> 
        This website uses cookies to improve your user experience. By continuing to browse the site you are agreeing to our use of cookies.<br />
        <a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a> <input type="submit" class="cookieclose" value="Accetto / Continue" /></p>
    </div>

    <div class="cookiepopup mobile_yes">
        <p>Questo sito utilizza i cookie. Continuando, ne accetti l'utilizzo. 
        This website uses cookies. By continuing to browse the site you are agreeing to our use of cookies.<br />
        <a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a> <input type="submit" class="cookieclose" value="Accetto / Continue" /></p>
    </div>

在 style.css 中：

.mobile_yes{ display:none } <--- normal behaviour
.mobile_no{ display:none } <---- it goes under a specific css media query for smartphones

笼统地说，不考虑 css 媒体查询，我无法隐藏任何 div。无论我做什么，总是显示.mobile_no div。

/* COOKIE POPUP */
.cookiepopup {
display:none;
background: #eee; border-top:1px solid #ddd; color:#555; 
bottom: 0;
padding: 5px 2% 10px;
position: fixed;
width: 96%;
z-index: 10; 
font-size:0.8em; 
}

.cookiepopup p {
width:90%; margin:0 auto;  max-width: 970px;
}

.mobile_no{ display:none }

JS 文件

$(document).ready(function(){

    check_cookie_for_cookiepopup();

});/*ready*/

var cookiepopup_cookie_name = "cookiepopup" ;
var cookiepopup_duration = 60 ; //scadenza in giorni
var show_cookiepopup = '';

function check_cookie_for_cookiepopup()
{ 
  show_cookiepopup = $.cookie( cookiepopup_cookie_name ); 
  if (show_cookiepopup == 'noshow') {

  } else {
    setTimeout(function(){ cookiepopup_show(); },1000);
  }
}

function cookiepopup_show() {
    $('.cookiepopup').show();
    $('.cookiepopup').find('.cookieclose').unbind('click').click(function(){
        $('.cookiepopup').hide();
        show_cookiepopup = 'noshow';
        $.cookie(cookiepopup_cookie_name, show_cookiepopup, { expires: cookiepopup_duration, path: '/' });
        return false;
    });
}

function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ; 
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; " ;

}

http://www.flapane.com/test/test.php的演示

我确定我错过了一些东西。任何帮助将非常感激。 * CODE REFRESHED * 是否与function cookiepopup_show() 有关？

【问题讨论】：

您只能在 ONE 标签上使用 ID 属性（以及 # 选择器）。
谢谢。当然，ID 必须是唯一的。我将它们更改为<div class="cookiepopup mobile_yes"> 和<div class="cookiepopup mobile_no">，我在样式表中也是如此。但是，如果您（答案属于在 j08691 之后回答的所有人，也感谢您）查看 DEMO 页面，.mobile_no div 仍然显示。我想知道jquery $('.cookiepopup').show()是不是罪魁祸首。

标签： jquery css cookies

【解决方案1】：

将 id #cookiepopup 更改为 .cookiepopup 类，然后您的 CSS 规则将正常工作。

目前，id 选择器规则比您的类选择器规则更具体。

正如其他人所说，id 在页面中应该是唯一的。

【讨论】：

【解决方案2】：

id 应该是唯一的。您有两个具有相同 id 的 div .

【讨论】：

【解决方案3】：

您错误地使用了id 和class。 ids 应该是唯一的，classes 不必是唯一的。查看（简化的）工作 jsFiddle here

【讨论】：