Question

我有一个标题div，以及一个容器div内的隐藏弹出式div。

当我单击一个按钮时，我想切换弹出窗口div的不透明度和宽度，使其扩展到位，我希望标题div缩小。

目前，它正在做的是导致标题div下拉到弹出div之下，进入一些段落文本。

如何约束标题div以保持其顶部/左侧坐标，但缩小/扩展其宽度/高度？

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
             font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
             overflow: hidden;
         }
         #popup {
             position: relative;
             top: -3px;
             background: #e8e8e8;
             margin: 3px 10px;
             padding: 10px;
             width: 250px;
             height: 80px;
             display: none;
             float: right;
             -moz-border-radius: 15px;
             border-radius: 15px;
             border: 1px solid #000;
         }
         #heading {
             position: relative;
             top: -3px;
             font-size: 1.5em;
             min-width: 50px;
             height: auto;
             overflow: auto;
             margin: 3px;
             float: left;
         }
         .button {
             margin: 3px;
             width: 120px;
             height: 40px;
             color: #fff;
             background: #cc0066;
             text-align: center;
             vertical-align: middle;
             line-height: 40px;
             -moz-border-radius: 5px;
             border-radius: 5px;
         }
         .container {
             margin: 3px 3px;
             padding: 5px;
             width: 550px;
             height: 460px;
             border: 1px solid #000;
         }
      </style>
      <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
   </head>
   <body>
       <div class='container'>
           <div id="popup">Here is a new section that appears</div>
           <div id="heading">This Is Heading Text In Collapsable Div</div>
           <br/>
           <br/>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p>
           <div class="button">Click Me</div>
       </div>
       <script>
           $(".button").click(function() {
               $("#popup").animate({
                   width: "toggle",
                   opacity: "toggle"
               }, "slow");
           });
       </script>
   </body>
</html>

Answer 1

不确定我是否完全明白你想要什么，但我会接受拍摄。考虑将标题和段落文本放在同一个<div>中，如下所示：

<div class='container'>
    <div id="popup">Here is a new section that appears</div>
    <div>
        <h1>This Is Heading Text In Collapsable Div</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p>
    </div>
    <div class="button">Click Me</div>
</div>

Answer 2

您可以切换使用切换类来实现此目的。

http://jsfiddle.net/derekstory/qmmVC/1/

HTML

<body>
    <div class='container'>
        <div id="popup">Here is a new section that appears</div>
        <div id="heading" class="heading1">This Is Heading Text In Collapsable Div</div>
        <br/>
        <br/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p>
        <div class="button">Click Me</div>
    </div>
</body>

CSS

.heading1 {
    position: absolute;

    top: 10px;
    font-size: 1.5em;
    min-width: 50px;
    height: auto;
    overflow: auto;
    margin: 3px;
    float: left;
}
.heading2 {
    position: absolute;
    margin-bottom: 10px;
    top: 10px;
    font-size: 1.5em;
    min-width: 50px;
    height: auto;
    overflow: auto;
    margin: 3px;
    float: left;
    width: 300px;
}

JS

$(".button").click(function () {
    $("#heading").toggleClass('heading2');
    $("#popup").animate({
        width: "toggle",
        opacity: "toggle"
    }, "slow");

});

另一个Div动画可以收缩的CSS Div

2 个答案: