Родительский div автоматически сдвигается при отображении дочернего div - PullRequest
Новая
       1

Родительский div автоматически сдвигается при отображении дочернего div

0 голосов
/ 04 марта 2012

Вот 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, любые комментарии помогут.Спасибо.

Ответы [ 2 ]

0 голосов
/ 04 марта 2012

Не уверен, что это то, что вы ищете.

Позвольте мне сначала спросить вас, были ли эти Div показаны рядом друг с другом?

Если нет, вы должны сделать их: 

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

См .: http://jsfiddle.net/sBv6f/2/

0 голосов
/ 04 марта 2012

Что касается вашей разметки, то, что я заметил, вы не закрыли свой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...