Как реализовать расширение и закрытие с помощью Jquery или Javascript — скользящих меню?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня на странице есть меню навигации слева.

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

Если пользователь хочет просмотреть меню навигации, ему / ей нужно щелкнуть маленький значок над меню навигации, например: «>>» и нажать «<<«, если они хотят его закрыть

Какой элемент управления мне нужно использовать для этого в Jquery.

Спасибо

Ответ №1:

Вы можете скрыть что угодно в jQuery с помощью hide() .

Так, например, если у ваших дочерних элементов menu есть класс .children , вы бы вызвали это в начале своего скрипта:

 $(".children").hide();
  

когда у вас было меню, подобное:

 <div class="menu">
  <div class="parent">Foo 1</div>
    <div class="children">Bar 1</div>
    <div class="children">Bar 2</div>
    <div class="children">Bar 3</div>
  <div class="parent">Foo 2</div>  
    <div class="children">Baz 1</div>
</div>
  

Допустим, у вас есть >> кнопка, у которой есть идентификатор #expand . Для того, чтобы «сдвинуть» дочерние элементы вниз (чтобы сделать их видимыми), вы могли бы сделать:

 $("#expand").click(function(){
  $(".children").slideDown();
});
  

То же самое относится к перемещению их вверх, чтобы снова сделать их невидимыми:

 $("#collapse").click(function(){
  $(".children").slideUp();
});
  

Ответ №2:

Хотя я не совсем понимаю вашу проблему, но вы можете добавить ссылку типа:

 <a id="myID" href="#">>></a>
  

затем свяжите событие щелчка с этой ссылкой

 $('a#myID').click(function(){
// Show or hide your division for example
});
  

Ответ №3:

 $('a.click').click(function() {
  var html = $(this).html() == 'amp;raquo;' ? 'amp;laquo;' : 'amp;raquo;';
  $(this).html(html);
  $('div.target').toggle();
});
  

Попробуйте это, заменив имена классов .click и .target, где это уместно.

Ответ №4:

Вот что вам понадобится:

для скрытия:http://docs.jquery.com/UI/Effects/Slide

для демонстрации:http://docs.jquery.com/UI/Effects/show