Как добавить CSS при нажатии кнопки

Как добавить CSS при нажатии кнопки jquery?

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

Вот что я пробовал:

$("#toogle_menu").click(function() {
  $("#jy_nav_pos_main").slideToggle("slow"),
    $("#toogle_menu").css({
      transform: "rotate(-90deg)"
    });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "nav nav-tabs row margin_auto" id = "jy_nav_pos_main" role = "tablist">
  <li>menu</li>
</ul>
<button id = "toogle_menu" class = "btn btn-light">
    &raquo;
</button>

У вас нет элемента div !!!

— 28.11.2018 09:03

javascript jquery html css

28.11.2018 08:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вместо того, чтобы устанавливать стиль для каждого щелчка, переключать класс $( "#toogle_menu" ).toggleClass( "toggled" ) и стиль этого класса в css

$("#toogle_menu").click(function() {
  $("#jy_nav_pos_main").slideToggle("slow"),
    $("#toogle_menu").toggleClass("toggled")
});

.toggled {
  transform: rotate(-90deg);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "nav nav-tabs row margin_auto" id = "jy_nav_pos_main" role = "tablist">
  ......
</ul>
<button id = "toogle_menu" class = "btn btn-light">
&raquo;
</button>

не работает на меня, мой код, подобный этому jsfiddle.net/sqfeonwh, у меня уже есть css для переключения, поэтому я добавляю еще css, но не работаю.

— 28.11.2018 09:23

28.11.2018 09:04

Попробуй это..

var clicked = false;
$("#toogle_menu").click(function() {
 var deg = clicked ? 0 : -90;
  $("#jy_nav_pos_main").slideToggle("slow"),
 
    $("#toogle_menu").css({
      transform: "rotate("+deg+"deg)"
    });
    clicked = !clicked;
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "nav nav-tabs row margin_auto" id = "jy_nav_pos_main" role = "tablist">
  <li>menu</li>
</ul>
<button id = "toogle_menu" class = "btn btn-light">
    &raquo;
</button>

28.11.2018 09:21

попробуй это...

<style type = "text/css">
    .nav{
        display: none;
    }
    .rotate{
        transform: rotate(90deg);
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transition: all 0.4s linear;
    }
    #clickBtn span{
        transition: all 0.4s linear;
    }
</style>
<button type = "button" id = "clickBtn">Click &nbsp;&nbsp;&nbsp;<span class = "fa fa-angle-right"></span></button>
<ul class = "nav nav-tabs row margin_auto" id = "jy_nav_pos_main" role = "tablist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<script type = "text/javascript" src = "jquery.js"></script>
<script type = "text/javascript">
    $(document).ready(function(){
        $("#clickBtn").on('click',function(){
            $(this).find('span').toggleClass('rotate');
            $(".nav").slideToggle();
        });
    });
</script>

Привет, добро пожаловать в SO. Вы можете дать более развернутый ответ, 1) прокомментировав, какие изменения внести / как это решает проблему 2) добавив свой код в качестве рабочего фрагмента. На подобные вопросы люди будут искать ответы там, где они смогут увидеть, как они работают без каких-либо усилий.

— 28.11.2018 12:47

28.11.2018 09:30