I have a media query like this:
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
padding-bottom: 25px;
}
}
I need to change the style like:
$( "#heightSet" ).change(function() {
var choice = $(this).val();
if (choice == "50"){
$(".navbar-nav > li > a").css({"padding-top":"15px","padding-bottom":"15px"});
}
if (choice == "60"){
$(".navbar-nav > li > a").css({"padding-top":"20px","padding-bottom":"20px"});
}
});
How can I take care of the @media (min-width: 768px)
on the .CSS()
so the code is affected only on that specific view port?
.my-class-15 {padding-top: 15px; padding-bottom: 15px;}
.my-class-20 {padding-top: 20px; padding-bottom: 20px;}
$("#heightSet").change(function () {
var choice = $(this).val();
if (choice == "50") {
$(".navbar-nav > li > a").addClass('my-class-15');
}
if (choice == "60") {
$(".navbar-nav > li > a").addClass('my-class-20');
}
});
Here's a fiddle, but it's not very useful without your HTML.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.