如何使浮動div顯示另一個div當我們點擊它

我想創建一個div（顯示）在窗口的右上角看起來像按鈕。如果用戶點擊它然後另一個div（表格）應該打開與div（顯示）滑下。所以我用jquery slideToggle來照顧它。現在，如果我單擊div（顯示）它slideToggle div（表格），但這兩個div移動第三個div（ano）向下。這是兩個影響其他divs。我想這兩個div打開像滑塊而不影響其他我猜它應該在頂部索引。下面是代碼如何使浮動div顯示另一個div當我們點擊它

<html> 
    <head> 
    <script src="jquery.js"></script> 
    <style type="text/css"> 
     .ano { 
     background-image:url('pic1.jpg'); 
     position: 
     } 
     .show { 
     display: block; 
     margin-top: -10px; 
     background-image:url('button.png'); 
     margin-left: 85%; 
     background-repeat:no-repeat; 
     } 
     .form { 
     display: block; 
     margin-top: -10px; 
     background-image:url('slider.png'); 
     background-repeat:no-repeat; 
     margin-left: 85%; 
     } 
     body { 
     background-image:url('bg.jpg'); 
     } 
    </style> 
</head> 
<body> 

    <div class="form"> 
    Here are some content 
    </div> 
    <div class="show"> 
    click me 
    </div> 
    <div class="ano"> 
    different div 
    </div> 

<script> 
    $(".show").click(function() { 
    $(".form").slideToggle(); 
    }); 
</script>

來源

2013-05-16 sun

如預期正確的，它工作正常？ DEMO http://jsfiddle.net/BtEUF/ –

yes.But不同的div即div（** ano **）正在移動:( – sun

這裏是你如何做到這一點。你可以換另一種格的形式和表演，這是固定在右上角：

.sitInCorner { 
    position:fixed; 
    top:0; 
    right:0; 
    width:15%; 
}

DEMO

這將始終使.show和.form是在右上角，無論是什麼，它不會影響頁面上的任何其他元素。

希望這可以做你想做的！^_^

編輯：

如果你想.form標籤開出隱藏的，這增加了CSS：

display:none;

DEMO

來源

2013-05-16 07:17:49

爲什麼** form ** div顯示當我加載頁面時？它應顯示當我點擊** show ** right？ – sun

看看更新後的jsfiddle ...它需要設置爲'display：hidden'開始。現在你可以看中並且在顯示中切換向上或向下箭頭div和類似的東西=）祝你好運頁面！ –

當然，如果你想要**表單div **在**點擊我div **之後，你應該做的唯一的事情就是將** div **放在** click me div * *在你的HTML。 –

試試看：

.ano 
{ 
background-image:url('pic1.jpg'); 
position:absolute; 
top:20px; 
}

希望這將有助於你.. !!

來源

2013-05-16 07:17:03

如何使浮動div顯示另一個div當我們點擊它

回答

相關問題