jquery - 隐藏\显示内容会覆盖其他扰流板按钮

Question

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

所以我点击了扰流板1，它确实滑动了它，但奇怪的是在其他扰流板下面..

像这样：

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

新访客尝试此作为剧透

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>

查询

$(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/

Answer 2

z-index=1在扰流板 1 上使用css 属性。

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

Answer 3

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

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

这可能会混淆 DOM 并成为问题的原因。您在所有 4 个扰流器 div 上都有相同的错误。

Answer 4

我相信这个小提琴就是你要找的。

问题在于您的 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();
})