jQuery перемикати CSS?


74

Я хочу перемикатися між CSS, щоб, коли користувач натискає кнопку ( #user_button), воно відображало меню ( #user_options) і змінювало CSS, а коли користувач натискає його знову, воно повертається до звичного. Поки це все, що я маю:

$('#user_button').click( function() {
    $('#user_options').toggle();
    $("#user_button").css({    
        borderBottomLeftRadius: '0px',
        borderBottomRightRadius: '0px'
    }); 
    return false;
});

Хто-небудь може допомогти?


2
Чи можете ви розміщувати свої фрагменти HTML / CSS?
Mike Robinson

Відповіді:


125

Для версій jQuery нижче 1.9 (див. Https://api.jquery.com/toggle-event ):

$('#user_button').toggle(function () {
    $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function () {
    $("#user_button").css({borderBottomLeftRadius: "5px"});
});

Використання класів у цьому випадку було б краще, ніж встановлення css безпосередньо, однак, подивіться на методи addClass та removeClass, про які згадував alecwh.

$('#user_button').toggle(function () {
    $("#user_button").addClass("active");
}, function () {
    $("#user_button").removeClass("active");
});

7
Це більше не працює, оскільки цей метод був припинений у jQuery 1.8 та вилучений у jQuery 1.9. Дивіться api.jquery.com/toggle-event
binaryfunt

Але що, якщо ми маємо ефект переходу? в цьому випадку ефект переходу не застосовуватиметься, так?
Pedram marandi

70

Я б використав функцію toggleClass у jQuery і визначив CSS для класу, наприклад

/* start of css */
#user_button.active {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px; /* user-agent specific */
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px; /* etc... */
}
/* start of js */
$('#user_button').click(function() {
    $('#user_options').toggle();
    $(this).toggleClass('active');
    return false;
})

Це те, що я теж зробив би. Тоді менше стилів у вашому JS
David Yell

1
Чому це не відповідь?
Леві Ботельо

@Ties - Безумовно, варто бути першим, хто розміщує повідомлення. Соромно, бо це примусово негативно впливає на якість відповідей. Краще швидка реакція, ніж ретельна.
Леві Ботельо

І те, і інше є правильними відповідями, це залежить від методу, який ви хочете використовувати. Мені цей, проте, подобається, дякую
Зак

Хто читає це. Будь ласка, розгляньте можливість використання цієї відповіді перед використанням відповіді, позначеної як рішення.
Джозеф Кейсі,

4

Можливо, ви захочете використовувати команди .addClass та .removeClass jQuery і створити два різні класи для станів. Для мене це був би найкращий спосіб зробити це.


3
toggleClass еквівалентний цим, якщо ви не хочете видалити інший клас, ніж ви додаєте з якихось причин
Зак


1

Найкращим варіантом було б встановити стиль класу в CSS, як .showMenuі .hideMenuз різними стилями всередині. Тоді ви можете зробити щось на зразок

$("#user_button").addClass("showMenu"); 

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.