问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

单击时折叠/展开链接

社区维基
1
新手上路，请多包涵

我在这里坚持使用折叠菜单。

我设法得到了一个脚本，它完全符合我的要求，但有点相反。在脚本中，链接默认为“展开”。我希望我的链接默认收缩，当您单击它时，它会展开。

任何帮助将非常感激！谢谢 ：）

 .show {
  display: none;
}

.hide:focus + .show {
  display: inline;
}

.hide:focus {
  display: none;
}

.hide:focus ~ #list {
  display: none;
  list-style-type:none;
}

@media print {
  .hide, .show {
    display: none;
  }
}

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </head>
  <body>

    <p>Lorem ipsum...</p>
    <div>
      <a href="#" class="hide">[Link]</a>
      <a href="#" class="show">[Link]</a>
      <ol id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    </div>

  </body>
</html>

原文由 GetGalax 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsshtml-lists
阅读 375
2 个回答
得票最新
社区维基
1
✓ 已被采纳

只需反转 css：

CSS：

 #list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }

原文由 Abhitalks 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我希望我理解你的权利。我通常为此使用 jquery…这是一个小演示： http ://cssdeck.com/labs/omya4ax9 HTML：

 <a href="#" class="hide" data-toggle="#list">Toggle: show</a>
<ol id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

CSS：

 #list {
  display: none;
}

#list.open {
  display: block;
}

记者：

 $('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $(id),
      className = "open";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Toggle: show");
    } else {
      $object.addClass(className)
      $(this).text("Toggle: hide");
    }
  }
});

天健林

原文由 NinjaOnSafari 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题