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

Question

我创建了以下网站（http://www.bestcastleintown.co.uk/#packages）并遇到了以下问题。

[重现的步骤]

1. 首先，用户导航到包，他们将看到“STANDARD”，“PROFESSIONAL”和“ULTIMATE”

2. 将浏览器窗口的大小调整为小型设备的窗口大小（必须低于768px）

3. 点击黑色包装盒中朝下的雪佛龙以显示详细信息

4. 点击黑色包装盒中朝下的雪佛龙隐藏细节

5. 确保在浏览器宽度较小的情况下点击V形符号后隐藏包裹详细信息，并将浏览器窗口调整为全屏

基本上用户点击了V形图标.price-plan-arrow，该图标仅出现在分辨率低于768px的设备上。当点击V形符号时，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窗口放大时，V形符号不再存在（因为它仅显示在宽度低于768px的设备上），<div id="plan-1">仍然设置为隐藏。这意味着用户无法在不调整浏览器大小的情况下再次显示内容。

无论如何要解决这个问题，例如动态脚本/媒体查询说“如果浏览器窗口是769px，那么确保.plan的显示属性设置为display:block;？

似乎jQuery目前正在我的样式表中覆盖这个基本规则：

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

[结果问题]

Answer 1

无论如何要解决这个问题，例如动态脚本/媒体查询说“如果浏览器窗口是769px，那么确保.plan的显示属性设置为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();
});