Как сделать функцию кнопки открытой и закрытой?

Question

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

</script> 
<script type='text/javascript'> 
$(function() { 
    $('.menu').click(function() { 
    $('#css-menu').css({right:'0'}); 
}); 
    $('.close-menu').click(function() { 
    $('#css-menu').css({right:'-340px'}); 
}); 
}); 
</script> 

<li class='menu' title='Menu'></li> 

бы признателен, если какой-либо помощи

Спасибо заранее ...

Answer 1

Вы быть немного неясно, но я думайте, что вы хотите использовать JQuery toggleClass, или, я бы использовал запись клика, и проверить, является ли счет четным или нечетным: открытым или закрытым.

$(function() { 
    var clickCount = 0; 
    $('.menu').click(function() { 
     if(clickCount%2==0){ 
       //do when open 
       $('#css-menu').css({right:'0'}); 
     }else{ 
      //do when closed 
      $('#css-menu').css({right:'-340px'}); 
     } 
     clickCount++; 
    }); 
}); 

Надеюсь, это поможет.

Answer 2

Не нужно регистрировать новую переменную и количество кликов. Просто добавить/удалить несуществующий класс «щелкнул» и тест по щелчку , если элемент «является» щелкнул

$(function() { 
 
    $('.menu').click(function() { 
 
    if ($(this).is('.clicked')) { 
 
     $(this).css({left:0}) 
 
        .removeClass('clicked'); 
 
    } else { 
 
     $(this).css({left:20}) 
 
        .addClass('clicked'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class='menu' title='Menu' style='position:relative'>AA</li>

Answer 3

Вот пример для toggleClass. При нажатии на конкретный <li> будет отображаться только состояние этого <li>.

Используйте ссылку this.toggleClass(), чтобы ссылаться на элемент, который нажали.

$(function() { 
 
    $('.menu').click(function() { 
 
    $(this).toggleClass('open'); 
 
    }); 
 
});

li ul { 
 
    display: none; 
 
} 
 
li.open ul { 
 
    display: block; 
 
} 
 
li:hover { 
 
    cursor: pointer; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu">Menu 1 
 
    <ul> 
 
     <li>Sub item 1.1</li> 
 
     <li>Sub item 1.2</li> 
 
     <li>Sub item 1.3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu">Menu 2 
 
    <ul> 
 
     <li>Sub item 2.1</li> 
 
     <li>Sub item 2.2</li> 
 
     <li>Sub item 2.3</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 4

Создание 2 классов, где один ваше показано состояние другого скрытое состояние Определить CSS для классов

#css-menu.hidden { 
    right: -340px; 
} 
#css-menu.shown { 
    right: 0; 
} 

Допуская класс показал = показано на рисунок.
И класс скрытого = скрытый

Добавить представленный (по умолчанию) класс вашего элемента Class = 'скрытые'

Then your script 



    $('.menu').click(function(){ 
    $('#css-menu').toggleClass('shown hidden'); 
    });