Question

对于我的网站，我想要包含一个基于CSS的链接，该链接可以从“更多信息+ ”和“更少信息 - ”切换，显示隐藏文字。我编写了代码，这似乎有效，但是点击了第二个“Less Info”，文本和内容会在一瞬间向下移动。有没有办法解决这个小问题？

请查看下面的JSFiddle代码，了解不必要的转变行动。 http://jsfiddle.net/kenhimself/hf1hxrhq/

HTML

<div id="show"> <a href="#show" id="open" class="toggletitle">More Info +</a>

    <div id="content"> <a href="#hide" id="close" class="toggletitle">Less Info –</a>

        <p>The second “Less info” is pressed, the “More Info” abruptly appears, shifting the “Less Info” text downwards for a split second.</p>
    </div>
    <!-- END Content -->
</div>
<!-- END Show -->

CSS

html, html a, body {
    text-decoration: none;
}
/* Requesting assistance START */
 #content {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}
#show:target #content {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
#show:target #open {
    display: none;
    visibility: hidden;
    transition-delay: 0s;
}
/* Requesting assistance END */

/* Link Hover Properties */
 .toggletitle {
    font-size: 20px;
}
a:link {
    -webkit-transition:color .1s ease-in;
    -moz-transition:color .1s ease-in;
    -o-transition:color .1s ease-in;
    transition:color .1s ease-in;
    color: #000;
}
a:visited {
    color: #000;
}
a:hover {
    -webkit-transition:color 0.5s ease-out;
    -moz-transition:color 0.5s ease-out;
    color: #0000FF;
}
a:active {
    text-decoration: none;
    color: #000;
}

Answer 1

您可以将More Info div放在较小的一个上。因为你动画的动画较少，但动画不多。尝试添加：

#show {
    position:relative;
}
#open {
    position:Absolute;
    background:#fff;
    z-index:10;
}

检查Demo Fiddle

Answer 2

另一种更有效的方法可能只关注重构标记并远离使用:target。虽然:target肯定是可行的，但它会记录历史缓存。

使用:focus和pointer-events的解决方案＃1：http://jsfiddle.net/qjupvbju/。

HTML：

<div id="show">
    <a href = "#" tabindex = "1"><span>More Info +</span><span>Less Info -</span></a>
    <p>The second “Less info” is pressed, the “More Info” abruptly appears, shifting the “Less Info” text downwards for a split second.</p>
</div>

CSS：

a, a:link, a:visited, a:focus, a:hover {
    color: #0000ff;
    outline: 0;
    text-decoration: none;
}

#show > a:not(:focus) + p, 
#show > a:not(:focus) > span + span, 
#show > a:focus > span:first-of-type {
    opacity: 0;
}

#show > a {
    position: relative;
    display: table;
    margin-bottom: 30px;
}

#show > a > span {
    position: absolute;
    left: 0;
    white-space: nowrap;
}

#show > a:focus > span + span {
    opacity: 1;
}

#show span,
#show p {
    transition: opacity 0.3s linear;
}

#show > a:focus {
    pointer-events: none;
}

解决方案＃2使用checkbox input来保持状态和:checked伪类：http://jsfiddle.net/ubv5x65c/。

HTML：

<div id="show">
    <input type = "checkbox" id = "toggle" />
    <label for = "toggle"><span>More Info +</span><span>Less Info -</span></label>
    <p>The second “Less info” is pressed, the “More Info” abruptly appears, shifting the “Less Info” text downwards for a split second.</p>
</div>

CSS：

#show > input[type = "checkbox"] {
    display: none;        
}

#show > input:not(:checked) + label > span + span,
#show > input:not(:checked) ~ p,
#show > input:checked + label > span:first-of-type {
    opacity: 0;
}

#show > label {
    cursor: pointer;
    color: #00f;
    position: relative;
    display: table;
    margin-bottom: 30px;
}

#show > label > span {
    position: absolute;
    left: 0;
    white-space: nowrap;
}

#show > input:checked ~ p {
    opacity: 1;
}

#show span, 
#show p {
    transition: opacity 0.3s linear;
}

在切换期间单击链接2时，链接1会向下移动一秒钟

2 个答案: