设置内部DIV后周围DIV的高度展开/折叠 [英] Setting height of surrounding DIV after inner DIV is expanded/collapsed

问题描述

我有一个简单的手风琴。我想做的是，当内容中的项目被点击（如何到达我们）例如，隐藏的后续文本被展开。一旦扩展，计算 content DIV的新高度。然后将新计算的 content DIV height指定给 .wrapper 的高度。

请参阅fiddle： http://jsfiddle.net/oampz/jLQf4/1/

HTML：

 < div class =wrapper> 
< ul class =panel> 
< li> 
< div class =heading> < a>菜单1< / a> 
 
< / div> 
< div class =content> 
< ul> 
< h2>十大问题< / h2> 
< li> 
< a href =>如何联系我们< / a> 
< p class =hide> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p> 
< / li> 
< li> 
< a href =>如何向我们发送电子邮件< / a> 
< p class =hide> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p> 
< / li> 
< li> 
< a href =>联系电话< / a> 
< p class =hide> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p> 
< / li> 
< / ul> 
< / div> 
< / li> 
< / ul> 
< / div> 
  

CSS：

 code> .heading {
 color：white; 
 font-weight：bold; 
 padding：15px 0 15px 20px; 
 background：gray; 
} 
 .content {
 background：＃99CCFF; 
 position：absolute; 
} 
 .hide {
 display：none; 
} 
 
 .wrapper {
 background：＃FFD1E0; 
 position：relative; 
} 
  

jQuery：

  $（。content ul li a）click（function（）{
 var $ this = $（this）; 
 $ this.next .content ul li a）。show（400）; 
 $ this.parent（）。siblings（）。children（）。next（）。hide（）; 
 return false; 
}）; 
  

UPDATE ** * * ** ** em> * ** ** ** b
$ b

.onClick之后，类似：

  $（wrappper） .css（{'height'：（$（。content）。height（）+'px'）}）; 
  

工作？

** ** ****

更新了小提琴： http://jsfiddle.net/oampz/jLQf4/9/

解决方案

如果我已正确理解您的问题，这可能会有帮助：

演示小提琴

您的内容 div没有指定宽度，所以它自动包装任何内部的，当你显示你的文本，它比最初扩展更远。

EDIT - 我认为可能有更简单的方法来完成您要完成的工作。而不是使用JS动态更新 .wrapper 我认为更容易删除 position：absolute 从 .content 。一些填充似乎使它看起来一样。

CSS：

  .content {
 width： 280px; 
 background：＃99CCFF; 
 padding：10px 0; 
 
 // position：absolute; 
} 
  

I have a simple accordion. What i am trying to do is that when an item within the content is clicked (How to reach us) for example, the hidden subsequent text is expanded. Once expanded, the new height of the content DIV is calculated. This newly calculated content DIV height is then assigned to the height of .wrapper. The red wrapper should then surround the entire box.

See fiddle: http://jsfiddle.net/oampz/jLQf4/1/

HTML:

<div class="wrapper">
    <ul class="panel">
        <li>
            <div class="heading">   <a>Menu 1</a>

            </div>
            <div class="content">
                <ul>
                    <h2>Top Ten Questions</h2>
                    <li>    
                        <a href="">How to reach us</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <a href="">How to email us</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <a href="">Contact Number</a>
                        <p class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS:

.heading {
    color: white;
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: grey;
}
.content {
    background: #99CCFF;
    position: absolute;
}
.hide {
    display: none;
}

.wrapper {
    background: #FFD1E0;
    position: relative;
}

jQuery:

$(".content ul li a").click(function () {
  var $this = $(this);
  $this.next(".content ul li a").show(400);
  $this.parent().siblings().children().next().hide();
  return false;
});

UPDATE *******************************

After the .onClick, would something like:

$(".wrappper").css({'height':($(".content").height()+'px')});

Work?

UPDATE *******************************

Updated fiddle: http://jsfiddle.net/oampz/jLQf4/9/

解决方案

If I understand your issue correctly, then this may help:

Demo Fiddle

Your content div doesn't have a specified width, so it's automatically wrapping whatever is inside of it, when you show your text it extends out further than it was initially.

EDIT - I think that there may be an easier way to go about what you're trying to accomplish. Instead of using JS to dynamically update the .wrapper I think it would be easier to remove the position: absolute from .content. Some padding seemed to make it look the same.

CSS:

.content {
    width: 280px;
    background: #99CCFF;
    padding: 10px 0;

    //position:absolute;
}

这篇关于设置内部DIV后周围DIV的高度展开/折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！