0

http://jsfiddle.net/qmmVC/

我有一个标题 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>
4

2 回答 2

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>

于 2013-06-26T15:44:04.610 回答
1

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

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");

});
于 2013-06-26T15:50:13.243 回答