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

我有一个在桌面视图中运行得非常好的。在桌面视图中，它的工作方式是，单击任何产品项（如下面的屏幕截图所示），说明框将显示在底部

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

我在移动视图中使用的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%;
  }
}

问题陈述：

@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;
}
}

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

我感觉我在使用显示：内联块！重要信息它覆盖了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块！重要信息仅适用于一个产品项，而不是所有产品项

您正在将底部的所有框设置为显示：除了在单击处理程序中处于活动状态的框之外，没有其他框。在这种情况下，您根本不需要下面的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;
}
}

---

只需为所有部分添加这个jquery

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

---

当你使用！在css（外部或内部）中，它覆盖内联样式。因此，尽管您使用jQuery将其设置为显示：none inline，但内部样式为！重要信息覆盖内联样式

您可以将“活动类别”之类的类添加到选定的div中，而不是每次都将display:inline块和“默认类别”之类的类添加到所有默认块中，而不是将display:none设置为display:none。然后以css中的活动类别为目标并设置样式

例如

---

只需添加jquery，如下所示：

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

试试看是否有效。

---

希望这就是你想要的。

如果我删除上面的CSS，我将无法获得移动视图所需的屏幕截图。我使用的小提琴正用于此。使用CSS代码背后的原因只是为了实现移动视图所需的屏幕截图。尽管使用

display:inline block，我们是否有任何方法可以堆叠它！重要信息

？您在吗？我为您提供了另一个答案，通过添加/删除类和设置该类的样式来实现这一点。您不必将单个样式设置为十几个选择器。相反，为所有这些元素指定一个类，并单独设置该类的样式。要这样做，请尝试并询问是否有任何混淆。这很有效，谢谢。如果我有任何问题，我会告诉你的。我很乐意。感谢您的欣赏。尝试删除jquery中的宽度条件…我正在添加另一个ans以向您展示它可能是工作的。您可以在中更新它吗？这样，我很容易想象。

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