在 html/css 的移动/平板电脑视图中应用 display:none

Question

我有一个fiddle，它在桌面视图中运行良好。在桌面视图中，它的工作方式是单击任何产品项目（如下面的屏幕截图所示），描述框会显示在底部。

在移动视图中，我看到所有描述框都显示在底部，而没有在顶部点击。

我用于移动视图的 CSS 代码的 sn-ps：

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;    padding-right: 3.91%;
  }
}

问题陈述：

目前。我看到所有的框都显示在底部，即使它没有被点击。

我感觉我正在使用 display: inline-block !important，它覆盖了 html 中的 display:none

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
  display: inline-block !important;
}
}

我想知道应该对 CSS 代码进行哪些更改，以便我可以将 display: inline-block !important 仅应用于一个产品项目而不是所有项目。

Answer 1

只需为所有部分添加此 jquery

$(window).resize(function(){
   if ($(window).width() <= 767) {  
          $("#franchisehub").click(function(){
            $(".franchisehubtv").css('display', 'inline-block');
          });
          //add this condition for all sections 
   }       
});

并且删除这个css ：

@media only screen and (max-width: 767px)
{
.goal-setting, .customization-tools, .custom-invoicing, .lead-tracking, .email-marketing, .royalty-calculator, .brand-control,
.franchisehubtv, .cloudbasedtextipad, .business-analytics, .tech-support, .employee-management, .order-management, .white-label  {
  display: inline-block !important;
}
}

Answer 2

您正在将底部的所有框设置为 display:none，除了在您的点击处理程序中处于活动状态的框。在这种情况下，您根本不需要下面的 CSS。我试过你的小提琴并删除了这个 css 样式，它在屏幕宽度小于 767px 的情况下也能正常工作

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
  display: inline-block !important;
}
}

Answer 3

当您在 css（外部或内部）中使用 !important 时，它会覆盖内联样式。因此，尽管您使用 jQuery 将其设置为 display:none 内联，但带有 !important 的内部样式会覆盖内联样式。

您可以将“active-category”之类的类添加到选定的 div 中，而不是将 display:inline-block 和“default-category”类设置为所有默认值，而不是每次都设置 display:none。然后在你的css中定位active-category类并设置样式

例如。

@media only screen and (max-width: 767px) {
    div.active-category {
      display: inline-block;
   }
   div.default-category {
      display: none;
   }
 }

Answer 4

只需添加 jquery 如下：

      $("#franchisehub").click(function(){
        $(".franchisehubtv").css('display', 'inline-block');
      });
      //add for all items

试试它是否有效。 希望这是你想要的。