隱藏\顯示的內容越過其他擾流板按鈕

我已經取得了一些破壞者，當你點擊它們，就會滑到一些信息隱藏顯示的內容越過其他擾流板按鈕

所以我就spoiler1點擊，才滑，但古怪的其他劇透下..

這樣的：

http://gyazo.com/4571423534e2442dc960d119c668dfa8

爲什麼會這樣，我如何解決它，這樣是當前擾流IM開放下將滑下內容下的破壞者？

我的代碼：

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

我該如何解決這個問題？：/

謝謝。

來源

2012-10-02 Jony

採取它的相關的所有CSS。請提供您的CSS –

添加了CSS也進行實時預覽：http://justxp.plutohost.net/slyfiles/index.html – Jony

使用z-index=1擾流板-1上的css屬性。

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

來源

2012-10-02 16:54:37 geekman

http://justxp.plutohost.net/slyfiles/index.html我做到了，甚至嘗試過 - 1，它沒有工作，所以我把它作爲1，並且它仍然不起作用 – Jony

你的HTML是錯位的，應設置和結束標記span這裏：

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

可能被混淆了DOM和是你的問題的原因。您在所有4個擾流板上都有相同的錯誤。

來源

2012-10-02 16:57:22 Nelson

我做了，沒有真正改變+ z索引後 – Jony

我檢查了你的網站，你的滑塊滿了跨度，絕對定位，其他的相對的，這就是爲什麼你有一些重疊其他人，所以不應該使用絕對定位，如果你想要一個流動佈局，其中滑動元素將其他元素向下移動。 – Nelson

我相信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(); 
})

來源

2012-10-02 18:37:54

新遊客試試這個擾流板

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/

來源

2015-01-18 06:29:10

隱藏\顯示的內容越過其他擾流板按鈕

回答

相關問題