Mam Fiddle, który działa idealnie w widoku na pulpicie. Na widoku na pulpicie działa w sposób na kliknięciu dowolnego elementu produktu (jak pokazano na zrzucie ekranu poniżej), skrzynka opisuje się na dole.

enter image description here

W trybie mobilnym Widzę, że wszystkie pola opisowe zostaje wyświetlone na dole bez kliknięcia na górze .


.. Fragmenty kodów CSS, których używałem do widoku mobilnego:

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



. Oświadczenie o problemach:

W tym momencie. Widzę wszystkie pudełka uzyskiwanie wyświetlacza na dole, nawet nie jest klikany.

Mam poczucie, że używam Wyświetlacz: Inline-Block! Ważne , który nadpisuje wyświetlacz : Brak z 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;
}
}

Zastanawiam się, jakie zmiany powinienem dokonać w kategoriach CSS, dzięki czemu mogę zastosować Wyświetlacz: Inline-Block! Ważne tylko do jednego elementu produktu zamiast wszystkich elementów.

0
flash 4 czerwiec 2018, 07:03

4 odpowiedzi

Najlepsza odpowiedź

Po prostu dodaj tę jQuery dla wszystkich sekcji

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

I Usuń tego 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;
}
}
1
Khushbu Vaghela 4 czerwiec 2018, 05:48

Ustawiasz wszystkie pola na dole, aby wyświetlić: Brak, z wyjątkiem tego, który jest aktywny w kliknięciu kliknięcia. W takim przypadku nie potrzebujesz w ogóle poniżej CSS. Próbowałem ze swojej skrzypie i usunięłem tego stylu CSS i działa, jak potrzebujesz szerokości ekranu mniej niż 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;
}
}
0
Karthikeyan 4 czerwiec 2018, 04:34

Kiedy używasz! Ważne w CSS (zewnętrzne lub wewnętrzne) zastępuje styl inline. Chociaż ustawisz go do wyświetlenia: Brak inline za pomocą jQuery, styl wewnętrzny z! Ważne zastępuje styl wbudowany.

Możesz dodać klasę jak "Active-kategoria" do DIL, które wybrano, zamiast ustawić wyświetlacz: blok wbudowany i domyślnie kategoria klasy "do wszystkich domyślnych zamiast ustawienia wyświetlania: brak za każdym razem. A następnie kieruj aktywną klasę kategorii w swoim CSS i ustaw styl

Na przykład.

@media only screen and (max-width: 767px) {
    div.active-category {
      display: inline-block;
   }
   div.default-category {
      display: none;
   }
 }
0
Karthikeyan 4 czerwiec 2018, 04:57

Po prostu dodaj jQuery jak poniżej:

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

Spróbuj, jeśli działa. Mam nadzieję, że tego chcesz.

0
Khushbu Vaghela 4 czerwiec 2018, 06:24