Как сделать правильное меню JQuery Slide Down? -- jquery поле с участием html поле с участием slidetoggle поле с участием slidedown поле с участием slideup пол Связанный проблема

How to make proper jQuery slide down menu ?


0
vote

проблема

русский

Привет друзья!

У меня есть проблема с slide down Меню, когда я первоначально нажимаю на <код> button (изображение), который работает <a id="js-cat" class="js-cat"></a> , но это код> slides down и сразу <код> slides up снова, который я не планировал делать. Моя цель - сделать его отзывчивым, например; Если пользователь будет нажать на этот <код> button (image) после того, как он должен сдвигаться вниз, и если пользователь нажму его дважды, и он должен снова скользить.

Пожалуйста, ребята, мне нужна ваша помощь. Я едва ли пытался сделать это, но в конечном итоге я не могу сделать свой код работы.

Вот мой HTML:

 <код> <a id='js-mnu' class='js-mnu'></a> <a id="js-cat" class="js-cat"></a>   

CSS

 <код> #js-cat {display:block;display:block;width:35px;height:35px;margin:17px  10px; position: absolute; right: 0;} .js-cat {background:url(images/cat.png) center center no-repeat;opacity:0.75;}   

и jQuery:

 <код> $(document).ready(function(){   $("#js-cat").click(function(){        $('ul.catalog').slideDown();     });   $("#js-cat").click(function(){        $('ul.catalog').slideUp();     }); });   
Английский оригинал

Hello friends!

I'm having issue with slide down menu when I initially click on button(image) which is <a id="js-cat" class="js-cat"></a> it works, but it slides down and immediately slides up again, which I haven't planned to do. My goal is to make it responsive, for instance; if user gonna click that button(image) once it should slide down, and if user gonna click it twice and it should slide up again.

Please guys I need your help. I was hardly trying to do it, but it eventually I'm unable to make my code work.

Here is my HTML:

<a id='js-mnu' class='js-mnu'></a> <a id="js-cat" class="js-cat"></a> 

CSS

#js-cat {display:block;display:block;width:35px;height:35px;margin:17px  10px; position: absolute; right: 0;} .js-cat {background:url(images/cat.png) center center no-repeat;opacity:0.75;} 

And jQuery:

$(document).ready(function(){   $("#js-cat").click(function(){        $('ul.catalog').slideDown();     });   $("#js-cat").click(function(){        $('ul.catalog').slideUp();     }); }); 
</div
              

Список ответов

1
 
vote
vote
Лучший ответ
 

Вы привязываете событие Click дважды. Вы должны привязывать только один раз и проверить, скрыто ли меню или не выдвижное или вниз.

 <Код> $(document).ready(function() {    $("#js-cat").click(function() {      var isHidden = $(".menu").is(":hidden");      if (isHidden) {        $('.menu').slideDown();      } else {        $('.menu').slideUp();      }    });      });  
 <Код> body {    margin: 10px;  }    .menu {    margin: 10px 0;    background: #abcdef;    width: 250px;    padding: 10px;  }    a {    cursor: pointer;    border: 1px solid #555;    background: #fafafa;    color: #555;    padding: 10px;    display: inline-block  }  
 <Код> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <a id="js-cat" class="js-cat">Click</a>    <div class="menu">Content: Lorem ipsum</div>  
 

You are binding the click event twice. You should only bind it once and check if the menu is hidden or not to slideup or down.

$(document).ready(function() {    $("#js-cat").click(function() {      var isHidden = $(".menu").is(":hidden");      if (isHidden) {        $('.menu').slideDown();      } else {        $('.menu').slideUp();      }    });      });
body {    margin: 10px;  }    .menu {    margin: 10px 0;    background: #abcdef;    width: 250px;    padding: 10px;  }    a {    cursor: pointer;    border: 1px solid #555;    background: #fafafa;    color: #555;    padding: 10px;    display: inline-block  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <a id="js-cat" class="js-cat">Click</a>    <div class="menu">Content: Lorem ipsum</div>
</div
 
 

Связанный проблема

2  Таблица Bootstrap в течение другого таблицы Bootstrap не сортируется  ( Bootstrap table within another bootstrap table not sortable ) 
У меня есть проект, который состоит из таблицы Bootstrap со многими строками, и каждая строка имеет раскрывающуюся кнопку, которая открывает подсуду. Я включи...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

3  Динамически изменить размер ввода  ( Dynamically resize input ) 
Мне просто интересно, как у вас динамически разместите вход, как вы введете в него ?? Я хотел бы использовать jQuery, если это возможно и AMP; Я бы предпоче...

2  Это хорошая идея до $ .post в Google Spreadsheet?  ( Is it a good idea to post to google spreadsheet ) 
Я пытаюсь разработать функцию в моей веб-странице, которая посылает данные как можно добраться до доступа к центральному репозиторию позже. Было бы здорово, е...

-1  Отправить не возвращает желаемый результат в AJAX  ( Submit is not returning desired result in ajax ) 
<код> onTap0 Возвращает результат желания. Но если я сделаю это: <код> onTap1 не возвращает желаемый результат. Вместо того, чтобы возвращать данные в...

6  Как отобразить несколько диапазонов даты между JQUERY DATE  ( How to display multiple date ranges between a date range jquery ) 
HI У меня есть дата Ranger Picker на этом, я хочу отобразить все диапазоны даты, определяемые для определенного диапазона даты, как это: Предположим, мой ди...

9  Ответ ASP.NET.redirect с jQuery Mobile - URL-хешированием  ( Asp net response redirect with jquery mobile url hashing ) 
У меня есть стандартные формы Auth Asp.net приложение. Моя регистрация и страница входа в систему находятся в одном файле .aspx с 2 мобильными страницами jQue...

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...

-8  Как автоматически форматировать пользовательский ввод 4 цифры до последних 2 цифр  ( How to automatically format user input 4 digits to last 2 digits ) 
У меня есть текстовое поле срок действия к кредитным картам, который пользователь, способный ввести 4 цифры, но я хочу автоматически форматировать ввод пользо...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

0  Как интегрировать history.js на мой сайт Ajax?  ( How to integrate history js to my ajax site ) 
У меня осталось и правый div на моем сайте и с навигационными кнопками. Допустим, Button_1, Button_2. При нажатии на эти кнопки изменит правильный контент D...

1  ajax () не отвечает после события keyup  ( Ajax not responding after keyup event ) 
Это проблема jQuery / ajax. JQuery / ajax отвечает на событие keyup с оповещением (LOC), показывающим результат значения, введенного в текстовое поле числа. ...

2  Slidedown и Slideup Looping Bug в Firefox  ( Slidedown and slideup looping bug in firefox ) 
http: ///www.quenity.com/post/1047/easy-to-style-jquery-drop-down-menu-tustorial#Comment-7912 У меня есть меню, точно так же, как одинарность, поэтому про...

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

0  Весной MVC возвращает ответ AJAX с использованием Jackson  ( Spring mvc return ajax response using jackson ) 
У меня есть сценарий, в котором я заполняю раскрывающуюся коробку в JSP через ответ AJAX с сервера. В контроллере я отказываюсь от коллекции объектов продукта...