父DIV顯示孩子的div

當繼承人的HTML自動切換：父DIV顯示孩子的div

<div id="mainDiv"> 
    <div id="showDiv"></div> 
    <div id="filtersDiv">  
     <div id="hideDiv"></div> 
    </div> 
    <div id="contentDiv"> 
     <div id="headlineDiv">Block 1</div> 
     <div id="storyDiv">Block 2</div> 
    </div>  
</div>

最初，showDiv是隱藏的，並在它的位置被顯示filtersDiv。後來，當userr點擊hideDiv，filtersDiv成爲隱藏和showDiv變得可見。然而，當這種情況發生，mainDiv的高度會自動增加，以「showDiv」 +「contentDiv」的高度。我想要的是將這些並排顯示。

繼承人的腳本：

$('#hideDiv').click(function() { 
      $('#hideDiv, #filtersDiv').hide("slide", { direction: "left" }, 1000, function() { 
       $('#showFDiv').show(); 
      }); 
     });

我是相當新的jQuery的，任何評論都將有所幫助。謝謝。

來源

2012-03-04 neuDev33

是否#filtersDiv和#contentDiv並排顯示在首位？你能擴大[此的jsfiddle（http://jsfiddle.net/sBv6f/），用於演示的效果呢？ – nnnnnn 2012-03-04 05:42:59

用戶如何點擊隱藏的div？ – JIA 2012-03-04 05:43:16

不確定這是不是您要找的。

讓我先問你有這些div首先表現出並排側？

如果沒有，你必須讓他們：

#showDiv, #contentDiv, #filtersDiv { float:left;}

參見：http://jsfiddle.net/sBv6f/2/

來源

2012-03-04 06:22:20 codef0rmer

我意識到我的錯誤，我已經給出了一個浮動：左#contentDiv，但錯過了#showDiv寫它，這是唯一的問題，謝謝，非常感謝。。 – neuDev33 2012-03-04 19:28:33

根據您的標記我已經注意到的是你沒有關閉您的mainDiv但同樣，這不是一個大問題，我要在這裏把整個文件與HTML，CSS和JS。試試看看是否可以幫到你。

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
<meta charset="utf-8"> 
<title>Untitled</title> 
<link rel="stylesheet" type="text/css" href="../style/style.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $('#hideDiv').click(function() { 
     $('#filtersDiv').hide(function() { 
      $('#showDiv').show(); 
     }); 
    }); 
    }); 
</script> 
<style type="text/css"> 
    div{ 
     padding: 20px; 
     border: 1px solid; 
     margin: 10px; 
    } 
    #showDiv{ 
     display: none; 
    } 
</style> 
    </head> 
     <body> 

<div id="mainDiv"> 
    <div id="showDiv">Show div</div> 
    <div id="filtersDiv"> Filter Div 
     <div id="hideDiv">Hide Div</div> 
    </div> 

    <div id="contentDiv"> 
     <div id="headlineDiv">Block 1</div> 
     <div id="storyDiv">Block 2</div> 
    </div> 
</div> 

     </body> 
    </html>

來源

2012-03-04 05:47:56

重複問題的代碼如何回答它？ – nnnnnn 2012-03-04 05:54:46

@nnnnnn： - 因爲它確實有效並且有一些變化 – 2012-03-04 05:57:01

哪一部分使showDiv和contentDiv並排顯示？ – nnnnnn 2012-03-04 05:59:41

父DIV顯示孩子的div

回答

相關問題