Jquery 显示子div时，父div会自动移动_Jquery_Html_Hide

Jquery 显示子div时，父div会自动移动

jquery html

Jquery 显示子div时，父div会自动移动,jquery,html,hide,Jquery,Html,Hide,以下是html： <div id="mainDiv"> <div id="showDiv"></div> <div id="filtersDiv"> <div id="hideDiv"></div> </div> <div id="contentDiv"> <div id="headlineDiv">Block 1&l

以下是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>

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

根据您的标记，我注意到您尚未关闭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>


无标题
$（函数（）{
$（'#hideDiv'）。单击（函数（）{
$（'#filtersDiv'）。隐藏（函数（）{
$（'#showDiv'）.show（）；
});
});
});
div{
填充：20px；
边框：1px实心；
利润率：10px；
}
#showDiv{
显示：无；
}
节目组
过滤室
隐藏分区
第一区
第2区

不确定这是否是您要找的

让我先问你，这些div一开始是并排显示的吗

如果没有，您必须：

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

请参阅：

首先是否将#filtersDiv和#contentDiv并排显示？您能否进一步演示效果？用户如何单击隐藏的div？@nnnnnn:-因为它确实可以工作，并且有一些更改，其中部分使showDiv和contentDiv并排显示？哪个部分说要并排显示。。阅读问题以便更好地理解：-（在此处尝试哪个部分？“我想要的是将这些并排显示。”结束争论，检查JSFIDLE的代码，如果你能帮助他改进代码，那就好了，否则就让它保持原样……没有冒犯我意识到我的错误，我给了一个浮动：左移到contentDiv，但没有在showDiv上写，这是唯一的问题。非常感谢。

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