Question

我正在尝试添加其他可显示和隐藏的可切换部分。

我的要求：

在主要浏览器（Opera，Chrome，Edge，IE11，Firefox，Mac上的Safari）上受支持
没有javascript

并且正在考虑使用image: Visual Studio 2017 environment: nodejs_version: "6" platform: - x64 install: - ps: Install-Product node $env:nodejs_version - yarn install --no-progress build_script: - yarn ng -- build --prod --aot --no-progress cache: - node_modules -> yarn.lock - "%LOCALAPPDATA%/Yarn" branches: only: - master artifacts: path: '\dist\' name: NINJASPA before_deploy: ssh root@ipadresshere -t "ls; rm -r -v /var/www/asp/ninjacodingfront/*; ls; exit; bash --login" deploy: provider: Environment name: NinjaCodingFront branches: only: - dev artifacts: path: '\dist\' name: NINJASPADEV before_deploy: ssh root@ipadresshere -t "ls; rm -r -v /var/www/asp/ninjacodingfrontdev/*; ls; exit; bash --login" deploy: provider: Environment name: NinjaCodingFrontDev Line 35 is where branches dev comes come: branches: --------------- (line 35) only: - dev标签，但是使用了代码

<details>

在Edge / IE浏览器上不起作用。

我是否可以“使其”正常工作，或者还有其他可以用于该任务的东西？只要没有javascript，就可以使用hacks。

Answer 1

这是建议的:checked方法，该方法使用隐藏的复选框：

.toggler {
  display: none;
}

.toggler+.toggler-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}

.toggler:checked+.toggler-content {
  max-height: 1000px;
  opacity: 1;
}

<div>
  <label for="toggler-id-1">Toggle</label>
  <input type="checkbox" id="toggler-id-1" class="toggler" />
  <div class="toggler-content">Hideable</div>
</div>

我仍然更喜欢使用@Finesse的解决方案，因为它允许您为此目的使用语义正确的HTML元素。

Answer 2

您可以在页面上添加一次a polyfill，以使页面上的所有<details/>正常工作：

<!-- Inside the body -->
<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>

我知道这是一个JS解决方案，但是不需要为每个<details/>编写任何JS。它可以与在所见即所得编辑器中编写的文本一起使用。

Answer 3

复制以下脚本并将其放在js文件中，然后导入或直接将其写入标记中。这对我有用。

!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():t()}(0,function(){var o="details",i="summary";(function(){var e=document.createElement(o);if(!("open"in e))return!1;e.innerHTML="<"+i+">a</"+i+">b",document.body.appendChild(e);var t=e.offsetHeight;e.open=!0;var n=t!=e.offsetHeight;return document.body.removeChild(e),n})()||(document.documentElement.className+=" no-details",window.addEventListener("click",function(e){if("summary"===e.target.nodeName.toLowerCase()){var t=e.target.parentNode;if(!t)return;t.getAttribute("open")?(t.open=!1,t.removeAttribute("open")):(t.open=!0,t.setAttribute("open","open"))}}),function(e,t){if(document.getElementById(e))return;var n=document.createElement("style");n.id=e,n.innerHTML=t,document.getElementsByTagName("head")[0].appendChild(n)}("details-polyfill-style","html.no-details "+o+":not([open]) > :not("+i+") { display: none; }\nhtml.no-details "+o+" > "+i+':before { content: "▶"; display: inline-block; font-size: .8em; width: 1.5em; }\nhtml.no-details '+o+"[open] > "+i+':before { content: "▼"; }'))});

如果您不想要该箭头，则只需将其从末端移除

+ o +“>” + i +“：{之前的{content：”▶“;显示：inline-block; font-size：.8em;宽度：1.5em; } \ nhtml.no-details'+ o +'[open]>“ + i +'：before {content：”▼“; }'

HTML <details>标签在IE / Edge中不起作用

3 个答案: