展开/折叠jQuery菜单选择器
I',试图构建一个扩展/折叠菜单。
我有一个主导航栏，里面有3个子菜单。默认情况下，子菜单的高度为50px，但一旦点击，这个高度就会变为200px。再点击一下，让它塌陷回原来的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");
}
});
});
我想知道什么功能或什么使用来确保一旦任何子菜单的被点击-它的兄弟会崩溃，如果有一个展开。
我希望我的代码有足够的信息给你们一个想法。
提前道谢！
共有1个答案
尝试将子菜单折叠逻辑移动到一个单独的函数中，并使用click事件函数中的相关元素调用它，如下所示：
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)));
}
});
如果菜单项有“filter”类，则折叠菜单项；如果菜单项没有，则折叠除单击菜单项之外的所有内容，但其他项可能会折叠。
下面是一个简单的实例：http://codepen.io/nrbernard/pen/doqwlr
-
本文向大家介绍jQuery实现折叠、展开的菜单组效果代码，包括了jQuery实现折叠、展开的菜单组效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现折叠、展开的菜单组效果代码。分享给大家供大家参考。具体如下： 这是一款jQuery实现的漂亮的竖向折叠菜单组，初次运行的时候请刷新一下页面，让jQ载入，这款菜单应用广泛，可用到后台左侧，网站前台也可以用，发现自腾讯微博开放
-
本文向大家介绍js实现简单折叠、展开菜单的方法，包括了js实现简单折叠、展开菜单的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单折叠、展开菜单的方法。分享给大家供大家参考。具体如下： 这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，CSS没有做美化，如果想用的朋友就自己美化吧。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js
-
问题内容： 我能够展开和折叠单元格，但我想在UITableViewCell内调用函数（展开和折叠）以更改按钮标题。 问题答案： 如果你想在细胞获得更大的身体，那么，你有你的店，在使用： 然后，当您想在didSelectRow中展开一个时： 编辑 这将使单元动画自己变大，您不需要单元中额外的动画块。 编辑2
-
本文向大家介绍JS+CSS实现的简单折叠展开多级菜单效果，包括了JS+CSS实现的简单折叠展开多级菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现的多级折叠菜单，可折叠展开/合拢，没有引用任何的外部文件，也没有用到图片，虽然简单，而且还有些粗糙，但核心的东西已经展示给大家了，正在研究
-
当折叠/展开某个节点时，其他节点的复选框被选中或未选中。 要重现这种行为，只需展开所有节点，检查、折叠和将自动检查。 我怎样才能防止这种行为？在稍后的程序中，我希望通过TreeView并获取节点的状态（已选中或未选中）来使用它们。
-
本文向大家介绍基于jQuery实现简单的折叠菜单效果，包括了基于jQuery实现简单的折叠菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： Html代码如下： 插件实现代码如下： 这里就不作讲解了，注释都写明了。 示例DEMO如下： 希望本文所述对大家学习jquery程序设计有所帮助。