应用于元素和媒体查询的Jquery .toggle方法的问题

Question

我已经创建了以下网站(http://www.bestcastleintown.co.uk/#packages)，并遇到了以下问题。

复制步骤

1. 首先，用户导航到包，在那里他们将看到“标准”、“专业”和“终极”。
2. 将浏览器窗口调整为小型设备的大小(必须小于768 to )
3. 单击黑色包装框中向下的面雪佛龙以显示详细信息。
4. 单击黑色包裹框中向下的面雪佛龙以隐藏详细信息。
5. 确保2次单击chevron后，在浏览器的小宽度处隐藏包的详细信息，并将浏览器窗口调整为全屏。

实际上，用户点击了雪佛龙图标.price-plan-arrow，它只出现在分辨率低于768 of的设备上。当单击雪佛龙时，jQuery将<div id="plan-1">设置为隐藏状态。

  $( "#arrow-1" ).click(function() {
    $( "#plan-1" ).slideToggle( "slow" );
  });

  $( "#arrow-2" ).click(function() {
    $( "#plan-2" ).slideToggle( "slow" );
  });

  $( "#arrow-3" ).click(function() {
    $( "#plan-3" ).slideToggle( "slow" );
  });
});

当broswer窗口被放大时，雪佛龙就不再存在了(因为它只显示在768 to宽度以下的设备上)，<div id="plan-1">仍然被设置为隐藏。这意味着用户无法在不调整浏览器大小的情况下再次显示内容。

是否有解决这个问题的方法，例如一个动态脚本/媒体查询，它说：“如果浏览器窗口是769 Is，那么确保.plan的display属性设置为display:block;？

现在看来，jQuery正在我的样式表中覆盖这一基本规则：

@media (min-width:769px) {
.plan {
  display: block;
}

产生的问题

​

​

Answer 1

有解决这个问题的方法吗，例如，一个动态脚本/媒体查询，它说：“如果浏览器窗口是769 Is，那么确保.plan的display属性设置为display:block;？”

先试试这个，看看important是否足以维护它

@media (min-width:769px) {
.plan {
  display: block !important;
}

否则你就得用JS来强迫它了

$(window).on('resize', function(){
    if ($(this).width() >= 769) $('.plan').css({display: 'block'}); // or .show();
});