手风琴在单击每个选项卡中的链接时崩溃

问题描述 投票：0回答：4

我在下面有这个纯 CSS 手风琴代码。它运行良好，但是当我在链接中包含一个链接时，该链接不会指向 href="" 中的内容，并最终关闭手风琴选项卡。

我尝试了几个例子，但没有任何效果。有谁知道我该如何解决这个问题？

谢谢。

$('.an-conteudo a').click(function(event){
    event.stopPropagation();
});
.accordion-an .transition, ul li i:before, ul li i:after, div {
  transition: all 0.25s ease-in-out;
}
.accordion-an .flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}
.accordion-an .no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.accordion-an h2 {
  color: #fff;
  background-color: #00A08F;
  padding: 15px;
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.accordion-an ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.accordion-an ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.accordion-an ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion-an ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion-an ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion-an ul li:last-of-type {
  padding-bottom: 0;
}
.accordion-an ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-an ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
  margin-left: -20px;
  margin-top: 10px;
}
.accordion-an ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-an ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.accordion-an ul li input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
.an-conteudo {padding-top: 10px;}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-an">

<ul>
  <li>
    <input type="checkbox" class="an-checkbox">
    <i></i>
    <h2>Languages Used</h2>
    <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
    <br>
    <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>

    </div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>How it Works</h2>
    <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>Points of Interest</h2>
    <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
  </li>
</ul>

</div>

javascript jquery css accordion
4个回答
0
投票

你的
<input type="checkbox" />
元素挡住了整个内容

在您的 CSS 中，您将 

position: absolute;
和 
height: 100%;
应用于 
<input />
元素。这会强制 
input
元素覆盖 
<li />
区域的整个高度，有效地阻止其中发生任何指针交互。也就是说，您的超链接文本甚至没有被点击；相反，您仍在单击 
input
元素。

在这里更新的代码片段中，我只做了一个更改：给

input
元素一个明确的高度。它与 
<H2>
元素（即 
line-height
+ 
padding
）的高度相同，因此手风琴标题将是唯一处理给定部分折叠/展开的部分。

试一试

$('.an-conteudo a').click(function(event){
    event.stopPropagation();
});
.accordion-an .transition, ul li i:before, ul li i:after, div {
  transition: all 0.25s ease-in-out;
}
.accordion-an .flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}
.accordion-an .no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.accordion-an h2 {
  color: #fff;
  background-color: #00A08F;
  padding: 15px;
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.accordion-an ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.accordion-an ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.accordion-an ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion-an ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion-an ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion-an ul li:last-of-type {
  padding-bottom: 0;
}
.accordion-an ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-an ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
  margin-left: -20px;
  margin-top: 10px;
}
.accordion-an ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-an ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 64px; /* Same height as H2 element */ 
  z-index: 1;
  opacity: 0;
}
.accordion-an ul li input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
.an-conteudo {padding-top: 10px;}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-an">

<ul>
  <li>
    <input type="checkbox" class="an-checkbox">
    <i></i>
    <h2>Languages Used</h2>
    <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
    <br>
    <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>

    </div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>How it Works</h2>
    <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>Points of Interest</h2>
    <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
  </li>
</ul>

</div>

0
投票

您需要使

.an-conteudo
元素出现在用户视角的顶部，以便可以单击该链接。只需尝试在 CSS 部分的
position: inherit; z-index: 1;
中添加
.an-conteudo
即可解决此问题。

$('.an-conteudo a').click(function(event){
    event.stopPropagation();
});
.accordion-an .transition, ul li i:before, ul li i:after, div {
  transition: all 0.25s ease-in-out;
}
.accordion-an .flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}
.accordion-an .no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.accordion-an h2 {
  color: #fff;
  background-color: #00A08F;
  padding: 15px;
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.accordion-an ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.accordion-an ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.accordion-an ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion-an ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion-an ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion-an ul li:last-of-type {
  padding-bottom: 0;
}
.accordion-an ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-an ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
  margin-left: -20px;
  margin-top: 10px;
}
.accordion-an ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-an ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.accordion-an ul li input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
.an-conteudo {padding-top: 10px;}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

.an-conteudo {
  position: inherit;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-an">

<ul>
  <li>
    <input type="checkbox" class="an-checkbox">
    <i></i>
    <h2>Languages Used</h2>
    <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
    <br>
    <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>

    </div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>How it Works</h2>
    <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>Points of Interest</h2>
    <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
  </li>
</ul>

</div>

0
投票

问题是你的输入 .accordion-an ul li input[type=checkbox] 得到 100% 高度所以当你点击容器时，它会自动关闭选项卡。

需要设置高度才能固定。

.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 60px; /* here is the change */
  z-index: 1;
  opacity: 0;
}


$('.an-conteudo a.an-titulo').click(function(event){
    event.preventDefault();
    console.log("Do something..");
});
.accordion-an .transition, ul li i:before, ul li i:after, div {
  transition: all 0.25s ease-in-out;
}
.accordion-an .flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}
.accordion-an .no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.accordion-an h2 {
  color: #fff;
  background-color: #00A08F;
  padding: 15px;
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.accordion-an ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.accordion-an ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.accordion-an ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion-an ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion-an ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion-an ul li:last-of-type {
  padding-bottom: 0;
}
.accordion-an ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-an ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
  margin-left: -20px;
  margin-top: 10px;
}
.accordion-an ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-an ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 60px;
  z-index: 1;
  opacity: 0;
}
.accordion-an ul li input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
.an-conteudo {padding-top: 10px;}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

a.an-titulo {
 position:relative
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-an">

<ul>
  <li>
    <input type="checkbox" class="an-checkbox">
    <i></i>
    <h2>Languages Used</h2>
    <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
    <br>
    <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>

    </div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>How it Works</h2>
    <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>Points of Interest</h2>
    <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
  </li>
</ul>

</div>

0
投票

您提出的所有解决方案都非常有效。谢谢！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.