Jquery Accordion проблема с высотой контейнера - PullRequest
Новая
       3

Jquery Accordion проблема с высотой контейнера

0 голосов
/ 11 февраля 2011

Я использую JQUERY Accordion, чтобы скрыть / показать некоторые ящики.У меня есть много содержимого в некоторых из них, и когда я нажимаю, чтобы показать заголовок, все содержимое заполняется из #mainContent - я могу видеть это, потому что для цвета фона установлено значение # mainContent

Я предполагаюэто функция, которую мне нужно добавить во встроенный JavaScript? 

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: true,
            hideOnStartup: true,
            active: false,
            autoHeight: true
        });
    });
    $(function() {
        $("#accordion_two").accordion({
            collapsible: true,
            hideOnStartup: true,
            active: false,
            autoHeight: true
        });
    });
    </script>

<div id="mainContent">

<div id="accordion">
<h4>Header</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam elementum placerat. Donec scelerisque pulvinar justo, nec bibendum neque suscipit et. Phasellus consequat consequat justo, eu lacinia nibh imperdiet id. Phasellus sit amet erat quis dui hendrerit egestas. Sed dolor libero, lobortis eu varius sit amet, pretium eget nisl. Suspendisse venenatis suscipit orci blandit dignissim. Suspendisse ac tortor eleifend felis cursus tempus. Aenean sodales, quam sed aliquam placerat, ligula augue varius enim, quis ultrices mauris tellus at elit. Aliquam erat volutpat. Donec eleifend ipsum eros. Ut laoreet, ligula ut eleifend imperdiet, dolor arcu tempus velit, quis convallis urna mi ut justo. Sed egestas, lectus eget ornare congue, mauris enim condimentum erat, ut condimentum ipsum neque non purus. Etiam orci nulla, imperdiet vel tempus in, placerat id dolor. Integer convallis consequat odio. Sed ornare urna turpis, ut malesuada purus.
</div>


<div id="accordion_two">
<h4>Header Two</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam elementum placerat. Donec scelerisque pulvinar justo, nec bibendum neque suscipit et. Phasellus consequat consequat justo, eu lacinia nibh imperdiet id. Phasellus sit amet erat quis dui hendrerit egestas. Sed dolor libero, lobortis eu varius sit amet, pretium eget nisl. Suspendisse venenatis suscipit orci blandit dignissim. Suspendisse ac tortor eleifend felis cursus tempus. Aenean sodales, quam sed aliquam placerat, ligula augue varius enim, quis ultrices mauris tellus at elit. Aliquam erat volutpat. Donec eleifend ipsum eros. Ut laoreet, ligula ut eleifend imperdiet, dolor arcu tempus velit, quis convallis urna mi ut justo. Sed egestas, lectus eget ornare congue, mauris enim condimentum erat, ut condimentum ipsum neque non purus. Etiam orci nulla, imperdiet vel tempus in, placerat id dolor. Integer convallis consequat odio. Sed ornare urna turpis, ut malesuada purus.
</div>

</div>

Ответы [ 2 ]

0 голосов
/ 11 февраля 2011

Ваш HTML немного не прав. Часть, которая должна быть свернута, должна быть во внутреннем элементе, подобном следующему: 

<div id="mainContent">

  <div id="accordion">
    <h4>Header</h4>
    <div>
      Lorem ...
    </div>
  </div>

  <div id="accordion_two">
    <h4>Header Two</h4>
    <div>
      Lorem ...
    </div>
  </div>

</div>

Кроме того, вам не нужны два аккордеона для этого. Вы можете сделать: 

<div id="mainContent">

  <div id="accordion">
    <h4>Header</h4>
    <div>
      Lorem ...
    </div>

    <h4>Header Two</h4>
    <div>
      Lorem ...
    </div>

  </div>
</div>

Пример: http://jsfiddle.net/ChrisMH/S4Qfx/

0 голосов
/ 11 февраля 2011

Как выглядит ваш css?Убедитесь, что содержащийся div (то есть ваш основной контент) переполнен: скрыт.У меня обычно такой макет, когда я использую аккордеон от ui 

<div id=wrapper>
    <div class='accordion'>
      <div class='header'><a href='javascript:void(0)'>Header 1</div>
      <div class='content'>Accordion content here</div>
      <div class='header'><a href='javascript:void(0)'>Header 2</div>
      <div class='content'>Accordion content here</div> 
    </div>
   </div>

   //css
   #wrapper{overflow:hidden;}

Установите высоту и ширину на обертке и аккордеоне, и вы должны быть установлены.

...