Итак, вот сценарий: я исправляю сайт, который имеет 25-30 страниц, используя этот вид подхода аккордеона (http://jsbin.com/uqosap/6).) Это мой подход javascript для аккордеона, так как я застрял в структуре html используется на 25-30 страницах, и я не хочу портить CSS. Поэтому вместо этого я просто поставлю javascript поверх него, чтобы он функционировал как аккордеон.
Моя проблема:
При нажатии на заголовки он не выравнивается по верху, поэтому вам придется прокрутить вниз, чтобы увидеть содержимое аккордеона. После щелчка заголовок должен автоматически выравниваться сверху, чтобы содержимое было видно на экране.
Я запутался, добавив свое if условие для класса. Это не работает так, как я хочу. Для заголовка, который в настоящее время активен, должен применяться класс «enabled», а для остальных будет класс «disable».
Буду рад любой помощи.
Спасибо.
[править]
Вот что я сделал для javascript.
<script type="text/javascript">
$(document).ready(function(){
$('.accordion .hdr:first').next().stop(false,true).slideDown(1000);
$('.accordion .hdr:first').addClass('enable')
$('.accordion .hdr').click(function(){
$('.accordion .content').hide();
$('.accordion .hdr').addClass('disable');
$(this).next().stop(false,true).slideDown(1000);
$(this).find(".aj_a").css({"background-position":"0 -43px","width":"20px","height":"15px","margin-right":"1px"})
if($(this).hasClass('disable')) {
$(this).addClass('enable');
}
else {
$('.accordion .hdr').addClass('disable');
$(this).addClass('enable');
}
});
});
</script>
и это структура для HTML.
<ul class="accordion">
<li>
<div class="hdr">heading 1</div>
<div class="content"><p><strong>Heading 1 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.
Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.
Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
</li>
<li>
<div class="hdr">heading 2</div>
<div class="content"><p><strong>Heading 2 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.
Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.
Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
</li>
<li>
<div class="hdr">heading 3</div>
<div class="content"><p><strong>Heading 3 Content:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque rhoncus diam sollicitudin porta. Aliquam condimentum nibh a massa ultrices tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent neque mauris, adipiscing a vulputate non, laoreet a est. Integer tincidunt, enim ac tempor imperdiet, libero purus hendrerit risus, sit amet tristique leo nisi sed erat. Donec sit amet eleifend arcu. Ut placerat lacinia malesuada.
Nulla facilisi. Vestibulum felis lacus, tincidunt a semper et, accumsan eu urna. Mauris pharetra facilisis tellus dapibus ultricies. Suspendisse non turpis sit amet nisl dictum egestas. Mauris sagittis elit eu felis commodo posuere. Nullam velit leo, porttitor sit amet faucibus at, mollis a purus. Maecenas varius dui nec ligula imperdiet sit amet gravida orci sagittis.
Fusce mi sem, luctus ut faucibus vel, hendrerit quis diam. Fusce ut metus felis, volutpat mattis nisi. Ut luctus quam a libero euismod eleifend. Aliquam at quam vel risus semper laoreet. Maecenas non velit dolor. Praesent in odio eget urna faucibus condimentum vel at ante. Aliquam non purus nec odio lacinia ornare. Fusce luctus tellus sed leo tristique cursus. Phasellus dapibus tempor nunc nec euismod. Proin est nulla, feugiat eu tempor vel, iaculis sed lorem. Donec dictum viverra libero, eu fermentum arcu imperdiet eu. Nullam ultricies, tellus ut fermentum consectetur, mauris eros fermentum lacus, ac tincidunt magna nulla et libero. Fusce laoreet cursus magna sit amet rutrum. Ut mollis interdum nunc, at pulvinar mauris auctor gravida. Nullam faucibus massa ut dolor eleifend nec molestie velit consectetur. In augue nibh, rhoncus eget consectetur ac, posuere nec lorem.</p></div>
</li>
</ul>