应用显示：在html / css中的移动/平板电脑视图中没有显示

Question

我有一个小提琴 ，在桌面视图中工作得很好。 在桌面视图上，它的工作方式是单击任何产品项（如下面的屏幕截图所示），描述框就会显示在底部。

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

我用于移动视图的CSS代码段：

@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覆盖了display：none from html

@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

您将底部的所有框都设置为显示：无，但单击处理程序中处于活动状态的框除外。 在这种情况下，您根本不需要以下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

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