Expand/Collapse jQuery 菜单 - 选择器
Expand/Collapse jQuery menu - selectors
我',正在尝试构建一个 expanding/collapsing 菜单。
我有一个主导航栏,里面有 3 个子菜单。默认情况下,子菜单的高度为 50 像素 - 但一旦单击,此高度将变为 200 像素。再次点击它,使其收缩回原来的 50px。
令我困扰的是,当我展开 subMenu1,然后展开 subMenu2 - subMenu1 保持展开状态,我希望它在选择第二个子菜单时折叠。
这是我的代码;
<!DOCTYPE html>
<html>
<head>
<title>projectFive</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
</div>
</div>
<div class="sideMenu">
<div class="sideButton">☰</div>
<div class="profilePic"></div>
<div class="menuButtonHolder">
<div class="menuButton">
<a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
<div class="subMenu"></div>
</div><!-- ending toggle button -->
<div class="menuButton">
<a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
<div class="subMenu"></div>
</div><!-- ending toggle button -->
<div class="menuButton">
<a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
<div class="subMenu"></div>
</div><!-- ending toggle button -->
</div> <!-- ending menu button holder -->
</div>
<!-- ending side menu
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="my.js" type="text/javascript"></script>
</body>
</html>
和 jQuery:
$(document).ready(function(){
var $menuButton = $(".sideButton");
var $menuBar = $(".sideMenu");
var $profilePic = $(".profilePic");
$menuButton.click(function(){
if ($(this).hasClass("active")){
$profilePic.fadeOut(200);
$profilePic.css({"width": "25px", "height": "25px", "transition": "width 0.3s linear, height 0.3s linear"}, 500);
$(".menuButtonHolder").css({
"top": "1000px",
"transition": "top .4s ease-out"});
$menuBar.animate({width: "60px"}, 500);
$menuBar.css({"background-color": "rgba(0,0,0,0.9)"});
$menuButton.removeClass("active");
} else {
$profilePic.fadeIn(500);
$profilePic.css({"width": "150px", "height": "150px", "transition": "width 0.7s linear, height 0.7s linear"}, 500);
$(".menuButtonHolder").css({
"top": "0px",
"transition": "top .8s ease-out"});
$menuBar.animate({width: "300px"}, 800);
$menuBar.css({"background-color": "rgba(0,0,0,0.5)", "transition": "background-color .5s linear"});
$menuButton.addClass("active");
}
});
$(".menuButtonIcon").click(function(){
if ($(this).hasClass("filter")){
$(this).find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
$(this).css({"height": "50px", "transition": "height 0.5s ease-out"});
$(this).removeClass("filter");
} else {
$(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
$(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
$(".menuButtonIcon").addClass("filter");
}
});
});
我想知道什么功能或使用什么来确保单击任何子菜单后 - 如果有一个展开,它的兄弟姐妹就会崩溃。
我希望我的代码有足够的信息给你们一个想法。
提前致谢!
尝试将您的子菜单折叠逻辑移动到一个单独的函数中,并在您的点击事件函数中使用相关元素调用它,如下所示:
function collapse($elements) {
$elements.removeClass("filter");
$elements.find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
$elements.css({"height": "50px", "transition": "height 0.5s ease-out"});
}
$(".menuButtonIcon").click(function(){
if ($(this).hasClass("filter")){
collapse($(this));
} else {
$(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
$(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
$(this).addClass("filter");
collapse($(".menuButtonIcon").not($(this)));
}
});
如果菜单项的 class 为 "filter",这将折叠菜单项;如果没有,则折叠 除了 单击的菜单项之外的所有内容,但是其他项目可能。
这是一个粗略的实际例子:http://codepen.io/nrbernard/pen/doqwLr
我',正在尝试构建一个 expanding/collapsing 菜单。
我有一个主导航栏,里面有 3 个子菜单。默认情况下,子菜单的高度为 50 像素 - 但一旦单击,此高度将变为 200 像素。再次点击它,使其收缩回原来的 50px。
令我困扰的是,当我展开 subMenu1,然后展开 subMenu2 - subMenu1 保持展开状态,我希望它在选择第二个子菜单时折叠。
这是我的代码;
<!DOCTYPE html>
<html>
<head>
<title>projectFive</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
</div>
</div>
<div class="sideMenu">
<div class="sideButton">☰</div>
<div class="profilePic"></div>
<div class="menuButtonHolder">
<div class="menuButton">
<a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
<div class="subMenu"></div>
</div><!-- ending toggle button -->
<div class="menuButton">
<a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
<div class="subMenu"></div>
</div><!-- ending toggle button -->
<div class="menuButton">
<a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
<div class="subMenu"></div>
</div><!-- ending toggle button -->
</div> <!-- ending menu button holder -->
</div>
<!-- ending side menu
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="my.js" type="text/javascript"></script>
</body>
</html>
和 jQuery:
$(document).ready(function(){
var $menuButton = $(".sideButton");
var $menuBar = $(".sideMenu");
var $profilePic = $(".profilePic");
$menuButton.click(function(){
if ($(this).hasClass("active")){
$profilePic.fadeOut(200);
$profilePic.css({"width": "25px", "height": "25px", "transition": "width 0.3s linear, height 0.3s linear"}, 500);
$(".menuButtonHolder").css({
"top": "1000px",
"transition": "top .4s ease-out"});
$menuBar.animate({width: "60px"}, 500);
$menuBar.css({"background-color": "rgba(0,0,0,0.9)"});
$menuButton.removeClass("active");
} else {
$profilePic.fadeIn(500);
$profilePic.css({"width": "150px", "height": "150px", "transition": "width 0.7s linear, height 0.7s linear"}, 500);
$(".menuButtonHolder").css({
"top": "0px",
"transition": "top .8s ease-out"});
$menuBar.animate({width: "300px"}, 800);
$menuBar.css({"background-color": "rgba(0,0,0,0.5)", "transition": "background-color .5s linear"});
$menuButton.addClass("active");
}
});
$(".menuButtonIcon").click(function(){
if ($(this).hasClass("filter")){
$(this).find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
$(this).css({"height": "50px", "transition": "height 0.5s ease-out"});
$(this).removeClass("filter");
} else {
$(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
$(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
$(".menuButtonIcon").addClass("filter");
}
});
});
我想知道什么功能或使用什么来确保单击任何子菜单后 - 如果有一个展开,它的兄弟姐妹就会崩溃。
我希望我的代码有足够的信息给你们一个想法。
提前致谢!
尝试将您的子菜单折叠逻辑移动到一个单独的函数中,并在您的点击事件函数中使用相关元素调用它,如下所示:
function collapse($elements) {
$elements.removeClass("filter");
$elements.find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
$elements.css({"height": "50px", "transition": "height 0.5s ease-out"});
}
$(".menuButtonIcon").click(function(){
if ($(this).hasClass("filter")){
collapse($(this));
} else {
$(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
$(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
$(this).addClass("filter");
collapse($(".menuButtonIcon").not($(this)));
}
});
如果菜单项的 class 为 "filter",这将折叠菜单项;如果没有,则折叠 除了 单击的菜单项之外的所有内容,但是其他项目可能。
这是一个粗略的实际例子:http://codepen.io/nrbernard/pen/doqwLr