javascript - 我如何摆脱对 slideToggle() 的这种跳转？

当我单击“详细信息 [+]”文本时，会出现轻微的跳跃。我怎样才能摆脱这个？

HTML

<div class="slide-caption"><strong>The Catwalk</strong><hr><em>Holmby Hills, California</em>
<hr>
<span class="details">Details [+]</span>
<span class="details-display" style="display: none;">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</span></div>

CSS

.slide-caption {
    background: #FFF;
    bottom: 30px;
    color: #333;
    cursor: pointer;
    opacity: 0.7;
    padding: 1em 1.5em;
    position: absolute;
    right: 30px;
    text-align: left;
    width: 30%;
    z-index: 0;
    transition: opacity 0.8s,z-index 0 0.8s;
    -moz-transition: opacity 0.8s,z-index 0 0.8s;
    -webkit-transition: opacity 0.8s,z-index 0 0.8s;
}

.slide-caption strong {
    font-family: 'montserrat',sans-serif;
    text-transform: uppercase;
}

hr {
    background-color: #DDD;
    border: 0;
    height: 1px;
}

.slide-caption em, .slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption .details-display {
    display: none;
}

JS

var toggled = true;
$('span.details').click(function () {
    if (toggled) {
        $(this).html('Details [-]');
    } else {
        $(this).html('Details [+]');
    }
    toggled = !toggled;
    $(this).parent().find("span.details-display").slideToggle("slow");
});

http://jsfiddle.net/jsLdjq2f/

最佳答案

只需将“详细信息显示”更改为 DIV 而不是 SPAN

    var toggled = true;

    $('span.details').click(function () {
        if (toggled) {
            $(this).html('Details [-]');
        } else {
            $(this).html('Details [+]');
        }
        toggled = !toggled;
        $(this).parent().find("div.details-display").slideToggle("slow");
    });

.slide-caption {
    background: #FFF;
    bottom: 30px;
    color: #333;
    cursor: pointer;
    opacity: 0.7;
    padding: 1em 1.5em;
    position: absolute;
    right: 30px;
    text-align: left;
    width: 30%;
    z-index: 0;
    transition: opacity 0.8s,z-index 0 0.8s;
    -moz-transition: opacity 0.8s,z-index 0 0.8s;
    -webkit-transition: opacity 0.8s,z-index 0 0.8s;
}

.slide-caption strong {
    font-family: 'montserrat',sans-serif;
    text-transform: uppercase;
}

hr {
    background-color: #DDD;
    border: 0;
    height: 1px;
}

.slide-caption em, .slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption .details-display {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-caption"><strong>The Catwalk</strong><hr><em>Holmby Hills, California</em>
<hr>
<span class="details">Details [+]</span>
<div class="details-display">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</div></div>

关于javascript - 我如何摆脱对 slideToggle() 的这种跳转？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28729450/