Question

继承人html：

<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。稍后，当用户单击hideDiv时，filtersDiv将变为隐藏状态，并且showDiv将变为可见。但是，当发生这种情况时，mainDiv的高度会自动增加到“showDiv”+“contentDiv”的高度。我想要的是将它们并排显示。

继承剧本：

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

我对jquery相当新，任何评论都会有所帮助。感谢。

Answer 1

根据你的标记，我注意到你没有关闭你的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>

Answer 2

不确定这是否是您要找的。

首先让我问你，那些Divs首先是并排显示的吗？

如果没有，你必须制作它们：

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

请参阅：http://jsfiddle.net/sBv6f/2/

显示子div时，父div会自动切换

2 个答案: