Я новичок в javascript
и jquery
, и я пытаюсь реализовать аккордеон с помощью jquery
, я пытаюсь сделать это на странице загрузки первой панели следует открыть и остальные панели должны закрыть и когда я нажимаю следующий раздел первая панель первой панели должна открыться и сначала закрыть, а когда я нажму следующую секцию на второй панели, первая и вторая должны закрыться, и когда я нажму последнюю панель, сначала нужно открыть, а остальные должны закрыть. вот мой код JsFiddleJquery Аккордеон функциональность
ответ
Почему бы вам не попробовать Jquery UI,
Reference Здесь Вот код,
<div id="accordion">
<h3>Section 1</h3>
<div>
<button id="first">Next Session</button>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<button id="second">Next Session</button>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<button id="third">First Session</button>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
Jquery:
$(function() {
$("#accordion").accordion({ active: 0 });
$("#first").click(function(){
$("#accordion").accordion("option", "active", 1);
});
$("#second").click(function(){
$("#accordion").accordion("option", "active", 2);
});
$("#third").click(function(){
$("#accordion").accordion("option", "active", 0);
});
});
Update:
Я создал соответствие без JQuery UI http://jsfiddle.net/dhana36/UYbMH/8/ JsFiddle
$("#nextsection").click(function(){
$(".panel__body:eq(0)").toggle('slow');
$(".panel__body:eq(1)").toggle('slow');
});
$("#nextsection1").click(function(){
$(".panel__body:eq(1)").toggle('slow');
$(".panel__body:eq(2)").toggle('slow');
});
$("#nextsection2").click(function(){
$(".panel__body:eq(2)").toggle('slow');
$(".panel__body:eq(0)").toggle('slow');
});
спасибо за реализацию реализации ui, но мне разрешено использовать только jquery. .. – user3282116
@ user3282116 Я создал соответствие, как вы сказали, попробуйте это http://jsfiddle.net/dhana36/UYbMH/8/ – dhana
как создать общий способ реализовать это? Если у меня 5 панелей, мне нужно написать 5 функций щелчка? – user3282116
- 1. Ребенок Аккордеон Аккордеон Аккордеон Аккордеон Аккордеон Аккордеон
- 2. Jquery аккордеон
- 3. Jquery функциональность
- 4. JQuery аккордеон расширил
- 5. JQuery меню аккордеон помощь
- 6. JQuery - Аккордеон - активное состояние
- 7. jQuery аккордеон link вопрос
- 8. JQuery Аккордеон пункт
- 9. Аккордеон с jQuery
- 10. Простое меню аккордеон (JQuery)
- 11. JQuery Аккордеон перезапись стили
- 12. jQuery аккордеон стрелки позиции
- 13. Простой аккордеон с jquery
- 14. JQuery Аккордеон Активация
- 15. jQuery - горизонтальный аккордеон onClick
- 16. Аккордеон + прилагаемая Jquery Content
- 17. аккордеон исправление (JQuery)
- 18. JQuery: скроллинг аккордеон эффект
- 19. Jquery аккордеон Вкладка
- 20. меню JQuery Аккордеон
- 21. JQuery Аккордеон вопрос Высота
- 22. JQuery Vallenato Аккордеон
- 23. Настройка JQuery Аккордеон
- 24. Аккордеон в jQuery
- 25. Аккордеон с использованием jquery
- 26. Как получить jquery-аккордеон?
- 27. JQuery аккордеон открыть раздел
- 28. JQuery аккордеон сворачивания братьев
- 29. JQuery Аккордеон плагин - Shopify
- 30. JQuery UI аккордеон CSS
что вы пробовали? У вашей скрипки нет JS. Вы должны посмотреть на [http://jqueryui.com/](http://jqueryui.com/), поскольку он имеет встроенную функцию аккордеона. – badAdviceGuy
просто хочу использовать только jquery not jquery ui – user3282116
[http://jsfiddle.net/UYbMH/4/] извините, я совершенно не знаком с jquery .. – user3282116