Question

我制作了一些剧透，当你点击它们时，它会滑动一些信息

所以我点击了spoiler1，它确实滑动了它，但奇怪的是在其他剧透下..

像这样：

http://gyazo.com/4571423534e2442dc960d119c668dfa8

为什么会这样做以及如何解决这个问题，以便当前剧透开关下的剧透将在内容下滑落？

我的代码：

        <div id="container">
    <div class="spoiler1"><span id="title1">This is Test</div>
        <span class="hide1">testttttttttttttttttttttt</span><!-- This is what opens after clicking on spoiler -->
        <br /><br />
    <div class="spoiler2"><span id="title1">This is Test</div>
        <br /><br />
    <div class="spoiler3"><span id="title1">This is Test</div>
        <br /><br />
    <div class="spoiler4"><span id="title1">This is Test</div>
        <br /><br />
        <br /><br />
        </div>

<script type="text/javascript">

$(document).ready(function(){

        $(".hide1").hide();
        $(".spoiler1").show();

    $('.spoiler1').click(function(){
    $(".hide1").slideToggle();
    });

});

</script>

CSS：

#title1 {
    color: #1794c8;
    position: relative;
    top: 10px;
    left: 10px;
    }

.spoiler1{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
        z-index:1;

}
.spoiler2{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
}
.spoiler3{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
}
.spoiler4{
    font-size: 16px;
    background-color: #c0e6d2;
    border: 1px solid #a7c8b7;
    height: 45px;
    width: 530px;
    position: absolute;
        text-shadow: 0px 1px 0px #f4f4f4;
        filter: dropshadow(color=#fff, offx=0, offy=1);
}

我该如何解决这个问题？：/

谢谢。

Answer 1

在剧透-1上使用z-index=1 css属性。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

您的HTML已损坏，您应在此设置和结束span的标记：

<div class="spoiler1"><span id="title1">This is Test</div>

可能会混淆DOM并导致您的问题。所有4个扰流器div都有相同的错误。

Answer 3

我相信this fiddle正是您所寻找的。

问题在于你的HTML和CSS。

使用容器划分内容并设置这些容器的样式。

我简化了课程等，这更容易理解。

HTML

<div id="featurelist_2_wrap">
    <div class="spoiler">
        <span class="feature">Networks</span>
        <div class="hide"><span class="featurelist_3-text-margin">We have a very secure system, including secure logging in,<br>
            management, balance management and more.<br>
            We do a SQL backup every hour to protect us from our<br>
            data being lost.</span></div>
    </div>
     <div class="spoiler"><span class="feature">Networks</span>
        <div class="hide"><span class="featurelist_3-text-margin">We have a very secure system, including secure logging in,<br>
            management, balance management and more.<br>
            We do a SQL backup every hour to protect us from our<br>
            data being lost.</span></div>
    </div>
    <div class="spoiler"><span class="feature">Networks</span>
        <div class="hide"><span class="featurelist_3-text-margin">We have a very secure system, including secure logging in,<br>
            management, balance management and more.<br>
            We do a SQL backup every hour to protect us from our<br>
            data being lost.</span></div>
    </div>    

</div>

CSS

.spoiler {
    position:relative;
    float:left;
}

.feature {
    display:block;
    background-color: #C0E6D2;
    border: 1px solid #A7C8B7;
    font-size: 16px;
    line-height:45px;
    text-shadow: 0 1px 0 #F4F4F4;
    width: 530px;
}

.hide { display:none; }

的Javascript

$('.spoiler').click(function() {
    $(this).find('.hide').slideToggle();
})

Answer 4

新访问者将此视为剧透

HTML

    <p>In the movie Citizen Kane, Charles Foster Kane's last word "Rosebud" 
turns out to <span class="spoiler">be a sled.</span></p>

CSS

<style>
.reveal { cursor:pointer; }
.spoiler{ display:none; }
</style>

JQUERY

$(document).ready(function() { 

    $('<a class="reveal">&gt;&gt;</a> ').insertBefore('.spoiler');

    $("body").on("click",".reveal" ,function(){
        $(this).parents("p").children("span.spoiler").fadeIn(2500);
        $(this).parents("p").children("a.reveal").fadeOut(600);
    });

});

取自 http://css-tricks.com/fade-in-spoiler-revealer/

隐藏\显示内容超过其他剧透按钮

4 个答案: