Применение отображения: нет в представлении для мобильных устройств / планшетов в формате 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%;
  }
}

Постановка задачи:

На данный момент.Я вижу все окна, отображаемые внизу, даже если они не нажаты.

Мне кажется, что я использую дисплей: встроенный блок! Важный , который переопределяет дисплей: нет из 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! Важный только к одному элементу продукта вместо всех элементов.

Answer 1

Просто добавьте jquery, как показано ниже:

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

Попробуйте, если это работает.Надеюсь, это то, что вы хотите.

Answer 2

Просто добавьте этот 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 3

Когда вы используете! Важный в вашем CSS (внешнем или внутреннем), он переопределяет встроенный стиль.Так что, хотя вы устанавливаете его для отображения: ни один встроенный с помощью jQuery, внутренний стиль с! Важный переопределяет встроенный стиль.

Вы можете добавить класс, подобный 'active-category', к выбранному элементу div вместо установки display: inline-block и класса 'default-category' для всех значений по умолчанию вместо установки display: noneкаждый раз.Затем выберите целевой класс в вашей CSS и задайте стиль

, например.

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

Answer 4

Вы устанавливаете все поля внизу для отображения: ни один, кроме тех, которые активны в вашем обработчике кликов.В этом случае вам не нужно ниже CSS вообще.Я попробовал вашу скрипку и удалил этот стиль CSS, и он работает так, как вам нужно, при ширине экрана менее 767 пикселей

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