Jquery Accordion container height problem

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

Я предполагаю, что это функция, которую мне нужно добавить в встроенный 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>

источник

2011-02-11 tom

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

<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;}

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

источник

2011-02-11 19:33:18 scrappedcola

Я думаю, что он работает сейчас, просто нужно выяснить, почему разрыв появляется в нижней части свернутых див. Благодаря! – tom

Я использую curveycorners.js для округления границ моего DIV для maincontent, но по какой-то причине, когда я установил его в #maincontent, и я скрою divs, которые используют аккордеон, все содержимое содержимого исчезает. Я предполагаю, что это нужно сделать с использованием переполнения: скрытый, что бы вы порекомендовали мне? – tom

Я не очень хорошо знаком с curveycorners.js, так как обычно использую метод CSS для раздвижных дверей для углов (главным образом потому, что большинство изменений js в содержимом будет отображаться как проблесковая нагрузка в IE). Вы можете уйти с переполнением: auto (в IE аккордеон может мерцать за пределами содержащего элемента при открытии нового раздела). Извините, я не буду очень помогать в этой проблеме. – scrappedcola

Ваш HTML-код немного неправильный. Часть, чтобы быть свернуты потребности быть во внутреннем DIV так:

<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/

источник

2011-02-11 19:33:55

Я только что проверил свой фактический HTML, и все части, которые должны быть свернуты, содержатся во внутренних div, но он все еще перекрывает #mainContent, может ли это быть проблемой с javascript? – tom

@tom Это работает, как вы этого хотите? http://jsfiddle.net/ChrisMH/S4Qfx/ –

Jquery Accordion container height problem

ответ

Смежные вопросы