Question

我正在尝试创建一个手风琴（纯CSS或javascript / jquery）。我有一个跨度内的链接列表，但需要手风琴才能在此跨度内单击第一个元素并扩展其下面的兄弟节点，如下所示：

<span class="pager">
   <a href="#" class="pager-active">Header</a>
   <a href="#" class="">Service 1</a>
   <a href="#" class="">Service 2</a>
</span>

这是我设置的一个例子。

https://jsfiddle.net/wb590xs3/7/

编辑：我无法更改此HTML结构，因为这是一个滑块，需要这些hrefs在同一级别。

Answer 1

您是否尝试过看到Bootstrap崩溃插件？只需查看this

即可

Answer 2

使用Jquery，您可以使用此文档jQuery Accordion.

进行手风琴

实施例

＆＃13;

$( function() {
    $( "#accordion" ).accordion();
  } );

＆＃13;

<html>
<head>
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. 
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. 
    </p>
  </div>
</div>
 
 
</body>
</html>

＆＃13;

Answer 3

您可以尝试这种纯CSS方式：

<style>
  .pager > a {display: block;}
  .pager div {display: none;}
  .pager div:target {display: block;}
</style>
<div class="pager">
  <a href="#showServices">Header</a>   
  <div id="showServices">
    <a href="#">Service 1</a>
    <a href="#">Service 2</a>
  </div>
</div>

希望它有所帮助。

从兄弟元素的第一个元素创建Accordion

3 个答案: