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

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня простая настройка аккордеона, состоящая всего из двух разделов. Верхняя, первая секция по умолчанию свернута, а нижняя вторая — развернута по умолчанию.

Я столкнулся с проблемой: в верхнем первом разделе при расширении где-то установлен стиль, который создает высоту ‘3791,8 пикселей;‘, создавая это огромное вертикальное пустое пространство (мой контент составляет всего 1000 пикселей). Я не уверен, откуда это происходит, поскольку я искал CSS по умолчанию, который был прикреплен к сценарию, и не нашел ничего связанного. (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css » rel=»таблица стилей» тип=»текст / css»/)

Я попытался определить высоту в этом конкретном div, accordion div, встроенном, внешне переключаемом переполнении и любом другом, каким способом попытаться закрыть это пустое пространство / переопределить этот стиль, откуда он берется.

Что я могу сделать?

Это практически все, что я реализовал (только с моим текстовым контентом);

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $( "#accordion" ).accordion({ active: 1 });

  });

  </script>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

 <p> Text content </p>

<h3><a href="#">Section 2</a></h3>

<p> Text content </p>

</div>

Ссылка на проблему: http://tinyurl.com/7xn33hb

1. Можете ли вы включить свой CSS для аккордеона?

2. Еще лучше была бы ссылка на страницу.

3. Конечно, ребята, ссылка добавлена выше в Q.

4. Что произойдет, если вы используете <p> вместо <br /> ?

Ответ №1:

Попробуйте установить autoHeight: false

 $(document).ready(function() {
    $( "#accordion" ).accordion({ 
        active: 1,
        autoHeight: false
     });
});

Ответ №2:

По умолчанию он принимает высоту самого высокого раздела и делает все разделы этой высоты. Вы можете изменить это, чтобы оно соответствовало высоте фактического содержимого, установив для свойства autoHeight значение false. например

 $( "#accordion" ).accordion({ active: 1, autoHeight: false });

Ответ №3:

По умолчанию виджет accordion в jQuery UI устанавливает для параметра autoHeight значение true. Согласно документации:

Если задано, самая высокая часть содержимого используется в качестве ссылки на высоту для всех остальных частей. Обеспечивает более согласованную анимацию.

Установите его на false , вот так:

 $( "#accordion" ).accordion({ active: 1, autoHeight: false });

Это даст вам желаемое поведение.

1. Я думаю, что путаница заключается в том, что ссылка на документацию, которую вы предоставляете, на самом деле говорит о heightStyle, а не autoHeight, т. Е. Документация неверна.

Ответ №4:

Просто установите свой autoheight to "false"