Javascript 垂直滑动/切换菜单_Javascript_Jquery_Navigation_Toggle_Slidetoggle

Javascript 垂直滑动/切换菜单

javascript jquery navigation

Javascript 垂直滑动/切换菜单,javascript,jquery,navigation,toggle,slidetoggle,Javascript,Jquery,Navigation,Toggle,Slidetoggle,我想使用垂直滑动/切换菜单，请参见下面的代码，此时菜单仅在您单击+符号时切换，请参见下面的代码我正试图找到一种方法，当你点击分类名称，如帖子，子菜单将打开（与+）相同的功能，页面将转到帖子页面。当你点击+号时，功能和页面保持不变我如何确定这项任务的目标？谢谢你的帮助/建议谢谢大家! <html> <head> <style type="text/css"> body{background:#CCC;} #container{margin:0 auto;

我想使用垂直滑动/切换菜单，请参见下面的代码，此时菜单仅在您单击+符号时切换，请参见下面的代码

我正试图找到一种方法，当你点击分类名称，如帖子，子菜单将打开（与+）相同的功能，页面将转到帖子页面。当你点击+号时，功能和页面保持不变

我如何确定这项任务的目标？谢谢你的帮助/建议

谢谢大家!

<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px;       padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px;  overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px     solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
 #menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
 #menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;} 
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"   type="text/javascript">

</script>



<script type="text/javascript">
$(document).ready(function(){
hideMenus();

$('.toggle').click(function(){
    var menu = $(this);
    hideMenus();

    if (menu.hasClass('toggle-open')) {     
        menuHide(menu);
    }else{
        menuShow(menu);
    }
});
});
 function hideMenus(){
$('.toggle').each(function(){
    menuHide($(this));
});
}

function menuHide(menu){ 
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250); 
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed'); 
} 
function menuShow(menu){ 
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open'); 
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250); 
}



</script>
</head>

<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop"><a href="#">Posts</a><div class="toggle">+</div></div>
 <ul class="submenu">
   <li><a href="#">Add New</a></li>
   <li><a href="#">Tags</a></li>
 </ul>
</li>
<li><div class="menutop"><a href="#">Pages</a><div class="toggle">+</div></div>
 <ul class="submenu">
   <li><a href="#">Add New</a></li>
   <li><a href="#">Edit</a></li>
 </ul>
</li>
<li><div class="menutop menusingle"><a href="#">Comments</a></div></li>
<li><div class="menutop"><a href="#">Users</a><div class="toggle">+</div></div>
 <ul class="submenu">
   <li><a href="#">Manage</a></li>
   <li><a href="#">Add New</a></li>
   <li><a href="#">Profile</a></li>
 </ul>
</li>
</ul>
</div></div>
</body>
</html>


正文{背景：#CCC；}
#容器{边距：0自动；背景：白色；边框：1px实心#999；宽度：400px；填充：20px；-moz边框半径：10px；-webkit边框半径：10px；溢出：隐藏；}
#菜单{文本对齐：左；}
/*切换区*/
#菜单.切换{浮动：右；宽度：9px；填充：5px；光标：指针；边框顶部：1px纯白；边框左侧：1px纯白#e0e0；颜色：#999；}
#menu ul.navmenu li:第一个子菜单。切换{边框宽度：0 1px；}
/*菜单设置*/
#菜单ul{填充：0；边距：0；宽度：150px；}
#菜单ul ul{边框：1px实心#CCC；溢出：隐藏；}
#menu ul.navmenu li{margin:0；列表样式：无；float:left；}
#menu ul.navmenu li{float:none；}
/*链接*/
#菜单ul.navmenu a，#菜单ul.navmenu a:已访问{文本装饰：无；填充：5px；显示：块；颜色：#008FDD；}
#菜单ul.navmenu ul.submenu a:悬停{背景：#FFF4D2；颜色：#333；}
/*标题外分区*/
#menu ul.navmenu.menutop{边框：1px实心#CCC；边框宽度：0 1px；溢出：隐藏；宽度：150px；背景：#F9F9F9；}
/*标题链接*/
#menu ul.navmenu.menutop a{宽度：120px；浮动：左；边距：0 0 1px 0；边框顶部：1px纯白；}
/*标题链接悬停*/
#menu ul.navmenu.menutopa:hover{color:#333；}
/*删除第一个标题的白色边框*/
#menu ul.navmenu li:first child.menutop a{边框宽度：0px；}
/*单菜单宽度固定*/
#menu ul.navmenu.menusingle a{width:140px；}
/*边界半径和特殊边界宽度*/
#menu ul.navmenu li:first child.menutop{边框宽度：1px 1px 0 1px；-moz边框半径：5px 5px 0；-webkit边框左上半径：5px；-webkit边框右上半径：5px；}
#menu ul.navmenu li:last child.menutop{边框宽度：0px 1px 1px；-moz边框半径：0 0 5px 5px；-webkit边框左下半径：5px；-webkit边框右下半径：5px；}
#菜单ul.navmenu li:最后一个子菜单ul.子菜单{-moz边框半径：0 0 5px 5px；-webkit边框左下半径：5px；-webkit边框右下半径：5px；}
#menu ul.navmenu li:last child.menutop open{-moz边框半径：0；-webkit边框半径：0px；边框宽度：0 1px；}
$（文档）.ready（函数（）{
希门努斯（）；
$（'.toggle'）。单击（函数（）{
变量菜单=$（此）；
希门努斯（）；
if（menu.hasClass（'toggle-open'）{
菜单（菜单）；
}否则{
菜单显示（菜单）；
}
});
});
函数hideMenus（）{
$（'.toggle'）。每个（函数（）{
menuHide（$（本））；
});
}
功能菜单侧（菜单）{
menu.removeClass（'toggle-open'）.addClass（'toggle-closed'）.empty（''）.append（'+'）.parents（'li'）.children（'ul'）.slideUp（250）；
menu.parent（'.menutop'）.removeClass（'menutop-open'）.addClass（'menutop-closed'）；
} 
函数菜单显示（菜单）{
menu.parent（'.menutop'）.removeClass（'menutop-closed'）.addClass（'menutop-open'）；
menu.removeClass（'toggle-closed'）。addClass（'toggle-open'）。empty（''）。append（'-'）。parents（'li'）。children（'ul'）。slideDown（250）；
}

+





+






+

这是我用来做这件事的代码，除了我使用了箭头图像而不是+和-但是你应该能够修改它。希望有帮助

编辑： 我将下面的代码放在JSFIDLE上，以便您可以试用：

HTML:

因此，您想单击类别名称而不是+？

toggle

类似乎是用来选择切换子菜单的元素的。您好JQuerybeast，感谢您的快速重播。我想点击名字和+号。因此，当您单击category name时，它将进入category name页面并向下滑动以下菜单。当您仅单击+符号时，以下菜单将下降，但页面仍保持在同一页面上。我希望这是有道理的。谢谢。你好，贾里德，谢谢你的回复。关于我如何瞄准这个切换类，有什么代码/建议吗？非常感谢SHi Fluffykitten，非常感谢您的编辑。我会试一试，让你知道我怎么做。非常感谢您的回复。S:）没问题。为了让您知道，如果您已经尝试过，我会为JSFIDLE选择错误的链接，我现在已经用正确的链接更新了它（），我注意到您编辑了您的文章以包含您的代码，所以我让它与您的代码一起工作：这并不完全是您所需要的-当您打开一个类别时，它不会关闭其他类别。最后一个菜单上的边框也有点不对劲，这可能与我给每个菜单的ID有关，但是你会比任何人都更了解你的css。嗨，小猫，我编辑了我的帖子，避开了这个问题。我已经试过了你刚才给我的子块代码，好极了，谢谢。这比我得到的教程要好。只有一个问题，我不知道这有多容易。我为类别名称（如H3）设置了一个链接，当人们点击类别1时，它会转到页面，是否有可能使标签一直延伸到箭头图像，在MO中，类别1和箭头之间的空白仅扩展菜单。有什么建议吗？非常感谢你的帮助！！伙计们，这太长了。请考虑搬到一个这样的聊天室！

<div id="menu">
    <div class="submenublock" id="submenu1"><h3>Category1</h3>
        <ul>
            <li><a href="page.html">option1</a></li>
            <li><a href="page.html">option2</a></li>
        </ul>
     </div>
    <div class="submenublock" id="submenu2"><h3>Category2</h3>
        <ul>
            <li><a href="page.html">option1</a></li>
            <li><a href="page.html">option2</a></li>
        </ul>
     </div>
</div>

$(document).ready(function(){
    $('div.submenublock > ul').hide();  
    $("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");

    $('div.submenublock > h3').click(function() {
        $(this).next().slideToggle('fast',function(){
            //set arrow depending on whether menu is shown or hidden
            if ($(this).is(':hidden')) {
                $(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom"); 
            } else {
                $(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom"); 
            }
            return false;
        }); 
   });

    /* change appearance of h3 element on hover to make it look like a link */
    $('div.submenublock > h3').hover(over, out);
    function over(event) {
        $(this).find("a").css("color", "#663");
        $(this).css("cursor", "pointer");
    }
    function out(event) {
        $(this).find("a").css("color", "");
        $(this).css("cursor", "default");
    } 
    /*end hover code*/
});