jQuery: раскрывающийся список будет расширен, если javascript недоступен

Question

У меня есть простой код JQuery, который расширяет раскрывающийся список при нажатии.

Но когда Javascript недоступен, раскрывающиеся списки не могут быть расширены.

Есть ли вариант, как сделать расширенные раскрывающиеся списки, когда Javascript недоступно?

МОЙ КОД:

$('.mainDropdownChevron').click(function() {

  var $ptag = $(this).closest('.mainDropdown').find('p');
  $('.mainDropdownChevron.active').not(this).removeClass('active');
  $('p.active').not($ptag).removeClass('active');

  $(this).toggleClass('active'); // for you css .chevron.active
  $ptag.toggleClass('active');
});

.mainDropdownChevron {
  transition: transform 0.5s;
}

.mainDropdownChevron.active {
  transform: rotate(180deg);
}

.mainDropdown {
  margin: 24px 0;
}

p {
  max-width: 500px;
  display: none;
  font-size: 0.8em;
}

img {
  max-width: 30px;
}
p.active {
  display: block;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainDropdowns">
  <div class="mainDropdown">
    <div class="clickableMainDropdown">
      <span>Intraorálne snímky</span>
      <img loading="lazy" class="mainDropdownChevron" src="https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png" alt="Checklist chevron">
    </div>
    <div>
      <p id="pDropdownService">
        Sú snímky s nízkou dávkou žiarenia, ktoré sa vkladajú do úst a za pomoci pacienta alebo držiaka sú chytené v ústach. Na zálkade veľkosti platničky zobrazujú detailne menší počet zubov.
      </p>
    </div>
  </div>

</div>

Answer 1

Я думаю, что проще всего было бы использовать CSS, который может определять наведение, если не щелкать. По умолчанию элементу body присваивается класс «No JavaScript». Внутри тега скрипта удалите этот класс из тела, затем вы можете использовать условное CSS, которое будет работать только в том случае, если JavaScript не смог запустить.

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

$('body').removeClass('NoJavaScript');

.mainDropdownChevron {
  transition: transform 0.5s;
}

.mainDropdownChevron.active {
  transform: rotate(180deg);
}
.NoJavaScript .mainDropdownChevron:hover {
  transform: rotate(180deg);
}

.mainDropdown {
  margin: 24px 0;
}

p {
  max-width: 500px;
  display: none;
  font-size: 0.8em;
}

img {
  max-width: 30px;
}
p.active {
  display: block;
  margin: 0 auto;
}
.NoJavaScript .mainDropdownChevron:hover p {
  display: block;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainDropdowns">
  <div class="mainDropdown">
    <div class="clickableMainDropdown">
      <span>Intraorálne snímky</span>
      <img loading="lazy" class="mainDropdownChevron" src="https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png" alt="Checklist chevron">
    </div>
    <div>
      <p id="pDropdownService">
        Sú snímky s nízkou dávkou žiarenia, ktoré sa vkladajú do úst a za pomoci pacienta alebo držiaka sú chytené v ústach. Na zálkade veľkosti platničky zobrazujú detailne menší počet zubov.
      </p>
    </div>
  </div>

</div>