你能用手风琴连接吗？

Question

我已经安装了一个简单的CSS手风琴，它运行正常。

我已经大量改编了这个：http://codepen.io/pollardld/pen/lthAF（实际上，虽然我没有其源地址，但是非常相似）。

问题：您单击并打开顶部（关闭位置）的文本。我想要那个，但我想在左边放一些文字（网站名称和链接），这些文字将链接而不是打开手风琴。这甚至是可能的（不使用覆盖Z-index的绝对定位链接，如果没有经验丰富的编码人员知道更清洁，更便宜的解决方案，这是我的后备。

由于

参考代码（对于这个问题不是必需的，但是Stack需要，因为我链接到Codepen：

 <h3>Accordion</h3>
<div class="accordion">
<!-- span to target fix closing accordion -->
<span class="target-fix" id="accordion"></span>

<!-- First Accoridon Option -->
<div>
<!-- span to target fix accordion -->
<span class="target-fix" id="accordion1"></span>

<!-- Link to open accordion, hidden when open --> 
<a href="#accordion1" id="open-accordion1" title="open">First Accordion</a>

<!-- Link to close accordion, hidden when closed -->
<a href="#accordion" id="close-accordion1" title="close">First Accordion</a> 

<!-- Accorion content goes in this div -->
<div class="accordion-content">
<p>Accordion 1 Content</p>
</div>
</div>

<!-- Second Accoridon Option -->
<div>
<span class="target-fix" id="accordion2"></span>
<a href="#accordion2" id="open-accordion2" title="open">Second Accordion</a>
<a href="#accordion" id="close-accordion2" title="close">Second Accordion</a>
<div class="accordion-content">
<p>Accordion 2 Content.</p> 
</div>
</div>

<!-- Third Accoridon Option -->
<div>
<span class="target-fix" id="accordion3"></span>
<a href="#accordion3" id="open-accordion3" title="open">Third Accordion</a>
<a href="#accordion" id="close-accordion3" title="close">Third Accordion</a>
<div class="accordion-content">
<p>Accordion 3 Content</p>
</div>
</div>
</div>


<div class="accordion blue">
<!-- span to target fix closing accordion -->
<span class="target-fix" id="accordion"></span>

<!-- First Accoridon Option -->
<div>
<!-- span to target fix accordion -->
<span class="target-fix" id="accordion4"></span>

<!-- Link to open accordion, hidden when open --> 
<a href="#accordion4" id="open-accordion4" title="open">First Accordion</a>

<!-- Link to close accordion, hidden when closed -->
<a href="#accordion" id="close-accordion4" title="close">First Accordion</a> 

<!-- Accorion content goes in this div -->
<div class="accordion-content">
<p>Accordion 1 Content</p>
</div>
</div>

<!-- Second Accoridon Option -->
<div>
<span class="target-fix" id="accordion5"></span>
<a href="#accordion5" id="open-accordion5" title="open">Second Accordion</a>
<a href="#accordion" id="close-accordion5" title="close">Second Accordion</a>
<div class="accordion-content">
<p>Accordion 2 Content.</p> 
</div>
</div>

<!-- Third Accoridon Option -->
<div>
<span class="target-fix" id="accordion6"></span>
<a href="#accordion6" id="open-accordion6" title="open">Third Accordion</a>
<a href="#accordion" id="close-accordion6" title="close">Third Accordion</a>
<div class="accordion-content">
<p>Accordion 3 Content</p>
</div>
</div>
</div>


<div class="accordion red">
<!-- span to target fix closing accordion -->
<span class="target-fix" id="accordion"></span>

<!-- First Accoridon Option -->
<div>
<!-- span to target fix accordion -->
<span class="target-fix" id="accordion7"></span>

<!-- Link to open accordion, hidden when open --> 
<a href="#accordion7" id="open-accordion7" title="open">First Accordion</a>

<!-- Link to close accordion, hidden when closed -->
<a href="#accordion" id="close-accordion7" title="close">First Accordion</a> 

<!-- Accorion content goes in this div -->
<div class="accordion-content">
<p>Accordion 1 Content</p>
</div>
</div>

<!-- Second Accoridon Option -->
<div>
<span class="target-fix" id="accordion8"></span>
<a href="#accordion8" id="open-accordion8" title="open">Second Accordion</a>
<a href="#accordion" id="close-accordion8" title="close">Second Accordion</a>
<div class="accordion-content">
<p>Accordion 2 Content.</p> 
</div>
</div>

<!-- Third Accoridon Option -->
<div>
<span class="target-fix" id="accordion9"></span>
<a href="#accordion9" id="open-accordion9" title="open">Third Accordion</a>
<a href="#accordion" id="close-accordion9" title="close">Third Accordion</a>
<div class="accordion-content">
<p>Accordion 3 Content</p>
</div>
</div>
</div>

CSS

body {
  background: #734f79;
  font-family: 'Flamenco', serif;
}

h3 {
  color: #fff;
  font-weight: normal;
  font-size: 2.5rem;
  text-align: center;
}

/*_________________  Accordion
________________________________________
.accordion, .second-accordion {
  position: relative;
  margin: 60px auto;
  width: 80%;
}

[id*="open-accordion"], [id*="close-accordion"], [id*="open-second-accordion"], [id*="close-second-accordion"] {
  background: #00a486;
  border-bottom: 1px solid #fff;
  line-height: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
  position: relative;
  width: 99%;
}

[id*="close-accordion"], [id*="close-second-accordion"] {
  display: none;
}

.accordion a, .second-accordion a {
  color: #fff;
  font-size: 1.25em;
  font-weight: normal;
  padding-left: 2%;
  text-decoration: none;
  text-shadow: none;
}

[id*="open-accordion"]:after, [id*="close-accordion"]:after, [id*="open-second-accordion"]:after, [id*="close-second-accordion"]:after {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 5px;
  top: 15px;
  z-index: 999;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}

.accordion-content {
  background: #fff;
  height: 0;
  margin: -1px auto 0;
  padding: 0 2.5%;
  position: relative;
  overflow: hidden;
  width: 90%;
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
}

.accordion span:target ~ .accordion-content, .second-accordion span:target ~ .accordion-content {
  display: block;
  height: auto;
  padding-bottom: 25px;
  padding-top: 10px;
}

.accordion span:target ~ [id*="close-accordion"], .second-accordion span:target ~ [id*="close-second-accordion"] {
  display: block;
}

.accordion span:target ~ [id*="open-accordion"], .second-accordion span:target ~ [id*="open-second-accordion"] {
  display: none;
}

.accordion span:target ~ [id*="close-accordion"]:after, .second-accordion span:target ~ [id*="close-second-accordion"]:after {
  border-top: 10px solid #333;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

*/

.accordion {
position: relative;
margin: 60px auto;
width: 100%;
}

[id*="open-accordion"], [id*="close-accordion"] {
background: #87D3B7;
border-bottom: 1px solid #fff;
line-height: 40px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
width: 99%;
}

[id*="close-accordion"] {
display: none;
}

.accordion a {
color: #fff;
font-size: 1.25em;
font-weight: normal;
padding-left: 2%;
text-decoration: none;
text-shadow: none;
}

[id*="open-accordion"]:after, [id*="close-accordion"]:after {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(255, 255, 255, 0.6);
position: absolute;
right: 5px;
top: 15px;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}

.target-fix {
display: block;
top: 0;
left: 0;
position: fixed;
}

.accordion-content {
background: #fff;
height: 0;
margin: -1px auto 0;
padding: 0 2.5%;
position: relative;
overflow: hidden;
width: 90%;
transition: all 0.1s ease;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
}

.accordion span:target ~ .accordion-content {
display: block;
height: auto;
padding-bottom: 25px;
padding-top: 10px;
}

.accordion span:target ~ [id*="close-accordion"] {
display: block;
}

.accordion span:target ~ [id*="open-accordion"] {
display: none;
}

.accordion span:target ~ [id*="close-accordion"]:after {
border-top: 10px solid #FFFFFF;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}

.accordion.blue [id*="open-accordion"],.accordion.blue [id*="close-accordion"] {background: #87C3D3;}
.accordion.red [id*="open-accordion"],.accordion.red [id*="close-accordion"] {background: #D38791;}

Answer 1

最简单的方法是完全使用<a>。

新窗口：

<!-- Link to open accordion, hidden when open --> 
<a href="#accordion1" id="open-accordion1" title="open">First Accordion <span data-href="http://www.google.com.au" onclick="window.open(this.getAttribute('data-href')); return false;">Google</span></a>

同一窗口：

<!-- Link to open accordion, hidden when open --> 
<a href="#accordion1" id="open-accordion1" title="open">First Accordion <span data-href="http://www.google.com.au" onclick="document.location.href = this.getAttribute('data-href'); return false;">Google</span></a>

使用一点Javascript将避免解开现有功能。

再次，正如我在评论中所述：

  

虽然看到纯CSS手风琴很有意思，但我不建议使用它。两个隐藏/显示以显示一个标题的锚点，即HTML不佳。我会找到一个更好的（可能使用JS。）

..我仍然不推荐这种手风琴。