I have a menu and my users should be able to resize it by pressing a button. I have the following code:
<header class='large'>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<button onclick="resizeMenu()">Resize</button>
function resizeMenu()
{
if(exists(header.large) {
$("header").removeClass("large").addClass("small");
} elseif(exists(header.small)
$("header").removeClass("small").addClass("large");
}
}
I don't really have an idea on how I should write the condition. By the way I am using jquery.
I have a menu and my users should be able to resize it by pressing a button. I have the following code:
<header class='large'>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<button onclick="resizeMenu()">Resize</button>
function resizeMenu()
{
if(exists(header.large) {
$("header").removeClass("large").addClass("small");
} elseif(exists(header.small)
$("header").removeClass("small").addClass("large");
}
}
I don't really have an idea on how I should write the condition. By the way I am using jquery.
Share asked Jan 30, 2014 at 12:55 UserUser 131 silver badge4 bronze badges4 Answers
Reset to default 3You can use the .hasClass from jQuery:
function resizeMenu()
{
if($("header").hasClass("large")) {
$("header").removeClass("large").addClass("small");
} elseif($("header").hasClass("small"))
$("header").removeClass("small").addClass("large");
}
}
Use toggleClass() to switch between the 2 classes
function resizeMenu() {
$("header").toggleClass("large small");
}
To check whether an element has class use .hasClass()
function resizeMenu() {
var $header = $('header')
if ($header.hasClass('large')) {
$header.removeClass("large").addClass("small");
} else if ($header.hasClass('small')) {
$header.removeClass("small").addClass("large");
}
}
is this you want?
<html>
<head>
<script src="http://code.jquery./jquery-1.10.1.min.js"></script>
<script src="http://code.jquery./jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("#resize").click(function () {
$("nav").animate({
height: ["toggle", "swing"]
}, {
duration: 500,
plete: function () {
}
});
});
});
</script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<button id="resize">
Resize</button>
</body>
</html>
Simply Write. Use Toggle Class in Jquery for add and remove Class
function resizeMenu()
{
$("header").toggleClass("large small");
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744820479a4595585.html
评论列表（0条）