Question

当我点击＆＃34;详细信息[+]＆＃34;文字，有轻微的跳跃。我怎么能摆脱这个？

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

只需更改＆＃39;详细信息 - 显示＆＃39;成为DIV而不是SPAN

＆＃13;

    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");
    });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: