Добавить класс перед открытием слайда и удалить класс после закрытия слайда с помощью функции slideToggle?

81
8

Я использую jQuery для открытия и закрытия меню при нажатии ссылки, которая отлично работает. Тем не менее, я пытаюсь добавить класс при щелчке ссылки до открытия слайдов меню, а затем удалить тот же класс после закрытия меню.

Итак: нажмите> addClass> открыть меню слайдов> нажмите еще раз> меню слайдов закрыто> removeClass

    $("#categoryNav").hide();
$('#showHideLink').click(function(){
$("#categoryNav").slideToggle(function() {
$('#showHideLink').toggleClass("catMenuOpen");
$('#mainNav').toggleClass("catMenuOpen");
});
});

Я попытался добавить $('#mainNav'.addClass('catMenuOpen'); перед функцией slideToggle вместо использования toggleClass который дает мне правильный эффект при первом щелчке, но я не могу понять, как удалить после того, как навигатор снова закрылся.

ура

EDIT: Вот мой HTML:

    <div id="mainNav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a id="showHideLink">Show Hide</a></li>
</ul>
</div>
<div id="categoryNav">
<ul>
<li><a href="#">CatMenu</a></li>
</ul>
</div>

спросил(а) 2012-05-03T07:20:00+04:00 8 лет, 5 месяцев назад
1
Решение
82

Это будет сделано в порядке, который вы задали:

$('#showHideLink').click(function(){

if (!$("#categoryNav").is(":visible"))
$('#showHideLink, #mainNav').addClass("catMenuOpen");

$("#categoryNav").slideToggle(function() {
if (!$("#categoryNav").is(":visible"))
$('#showHideLink, #mainNav').removeClass("catMenuOpen");
});
});

РЕДАКТИРОВАТЬ

Проверьте это в этом jsfiddle

ответил(а) 2012-05-03T07:43:00+04:00 8 лет, 5 месяцев назад
58

Я просто наткнулся на это, ища что-то еще. Вот для этого рабочий код.

/=================== SCRIPT НАЧАЛО ЗДЕСЬ ===============================================

(function($){    
$(document).ready(function() {
$('#open_sidebar').click(function() {
if(!$(this).hasClass("open")) {
$("#open_sidebar").toggleClass("open").removeClass('closed');
$(this).text($(this).text() == 'Close Window' ? 'Open Window' : 'Close Window');
} else {
$("#open_sidebar").toggleClass("closed").removeClass('open');
$(this).text($(this).text() == 'Open Window' ? 'Close Window' : 'Open Window');
}
});
});
})(jQuery);

/=================== SCRIPT НАЗАД ЗДЕСЬ ======================

Вот HTML:


<div id="open_sidebar">Open Window</div>

Вот что произойдет при нажатии:

<div id="open_sidebar" class="open">Close Window</div>

И на 2-м клике:

<div id="open_sidebar" class="closed">Open Window</div>

ответил(а) 2013-10-15T03:27:00+04:00 7 лет назад
59

попробуйте это, надеюсь, это поможет

$('#showHideLink').click(function(){

$("#categoryNav").slideToggle(function() {
var property = $('#categoryNav').css('display');
if(property == 'block')
$('#showHideLink, #mainNav').addClass("catMenuOpen");
else
$('#showHideLink, #mainNav').removeClass("catMenuOpen");
});
});

это скрипка http://jsfiddle.net/eh6jv/1/

ответил(а) 2012-05-03T07:49:00+04:00 8 лет, 5 месяцев назад
58

попробуйте создать массив строк с именами классов, а затем на каждом щелчке, переключите b/w значения массива.

<script>
var i=0;
var classes = new Array("catMenuClose","catMenuOpen");
$("#categoryNav").hide();
$('#showHideLink').click(function(){
i=i*(-1)+1;
$("#categoryNav").slideToggle(function() {
$('#showHideLink').toggleClass(classes[i]);
$('#mainNav').toggleClass(classes[i]);
});
});
</script>

ответил(а) 2012-05-03T07:46:00+04:00 8 лет, 5 месяцев назад
59

Попробуйте следующее:

$('#showHideLink').click(function(){
if($(this).hasClass("catMenuOpen"){
$(this).removeClass("catMenuOpen");
}else
$(this).addClass("catMenuOpen");
$("#categoryNav").slideToggle(function() {
$('#showHideLink').toggleClass("catMenuOpen");
$('#mainNav').toggleClass("catMenuOpen");
});

Я не совсем уверен, что приведенный выше код будет работать на 100%, потому что у меня нет возможности его протестировать, но идея в том, что если у элемента есть "открытый" класс, то вы хотите его удалить (так как вы мы снова нажали и закрываем div). Если вы нажмете и у элемента нет класса "open", вы хотите добавить его в div.

ответил(а) 2012-05-03T07:36:00+04:00 8 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема