如何在slideToggle（）上摆脱这种跳跃？

Question

When I click on the "Details [+]" text, there is a slight jump. How can I get rid of this?

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/

Answer 1

Just change the 'details-display' to be a DIV rather than 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>