时间戳

首页 > 解决方案 > jQuery：当 javascript 不可用时，下拉菜单将被扩展

html - jQuery：当 javascript 不可用时，下拉菜单将被扩展

问题描述

我有一个简单的 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>

标签： htmljquery

解决方案

我认为最简单的方法是使用 CSS，如果不点击，它可以检测悬停。默认情况下，为 body 元素指定类“NoJavaScript”。在脚本标签中，从正文中删除该类，然后您可以使用仅在 JavaScript 无法运行时才有效的条件 CSS。

在技​​术上（我认为）使用 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>

推荐阅读