Скольжение вниз Toggle Jquery

0

Я не знаю много JQuery, и я застрял, может кто-нибудь помочь.

Я коробки, которые скользят вниз при нажатии, однако я хочу их, чтобы только один мог появиться сразу. В тот момент, когда вы открываете один, другой, они оба остаются открытыми. Кто-нибудь знает, как сделать так, чтобы, когда кто-то открыт, и вы нажмете на второй, первый закроется, а второй откроется?

пример

Благодарю.

  • 2
    ты можешь показать свой код?
Теги:
hyperlink
slidedown

4 ответа

0

Почему бы вам не использовать JQuery UI Accordion. Вам будет легче управлять добавлением новых разделов, а теперь ваши заголовки не будут скрыты.

Из их примера кода:

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    Section 1 Contents
  </div>
  <h3>Section 2</h3>
  <div>
    Section 2 Contents
  </div>
  <h3>Section 3</h3>
  <div>
    Section 3 Contents
  </div>
  <h3>Section 4</h3>
  <div>
    Section 4 Contents
  </div>
</div>


</body>
</html>

[UPDATE] В переигровке на user2246968 комментарий: Проверьте эту скрипку это быстрый обходной путь в той же структуре кода, но все - таки я бы порекомендовал вам, чтобы дать некоторое время, проверяя JQuery UI аккордеон.

  • 0
    Мне бы хотелось, чтобы на панели навигации были кнопки для создания анимации (как в примере, который я предоставил) ... Так что, когда вы нажимаете «о», появляется раздел «о» сверху, а затем щелкает контакт. раздел будет скользить вниз. Можно ли это сделать с помощью кода выше?
  • 0
    Да, это можно сделать, и проверьте после обновления, если вы не хотите изменять структуру своего кода.
0

Вы также можете использовать jquery Accordion лучшее решение для вашей проблемы, потому что, если ваше количество меню улучшится, сложность кода для slidetoggle также увеличится. Итак, пусть аккордеон справится с этим для вас

0

Если вы покажете нам свой код, я могу дать вам более конкретный ответ, но вы должны иметь возможность использовать что-то вроде этого:

$('.selector').click(function() {
    $(this).siblings().slideToggle();
});

Таким образом, когда вы нажимаете какой-либо элемент в классе "selector", он фокусируется на элементе $ (this), который вы нажали, находит всех других текущих братьев и сестер для выпадающих меню и переключает все из них, включая тот, который вы нажали. Таким образом, он должен открыть тот, который вы нажали, и закрыть все остальные.

0

Пожалуйста, не указывайте внешние ссылки, вы должны отправить код в свой вопрос. Предоставление jsfiddle.net, которое воспроизводит вашу проблему, будет намного лучше.

Подойдя к вашей проблеме,

Сделайте slideToggle для обоих элементов в этих событиях щелчка.

$('#dropdown').on('click',function(){
  $('.dropdownwrap').slideDown();
  $('.dropdownwrap2').slideUp();
});

$('#dropdown2').on('click',function(){
  $('.dropdownwrap').slideUp();
  $('.dropdownwrap2').slideDown();
});
  • 0
    Будет :) Я попробовал это, но он просто сделал так, чтобы любая кнопка, которую вы нажмете, открылась .dropdownwrap2
  • 0
    @ user2246968 - используйте slideUp & slideDown вместо slideToggle . Смотрите мой обновленный ответ.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню