文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >OnClick垂直导航

问OnClick垂直导航
EN

Stack Overflow用户
提问于 2012-03-23 05:08:58
回答 2查看 3.8K关注 0票数 0

我的网站正在经历一次巨大的翻新。我想给它添加更多的功能，但我想我已经做得有点超出了我的能力范围。

与我的问题相关的链接是：http://www.andrewryan.me/AndrewRyan/index.html

我在顶部菜单的左侧有一个按钮。我把它做得很漂亮，而且它是纯css的。每当我使用菜单时，不得不遵循不确定的路径，冒着关闭菜单或子菜单的风险，这是非常令人恼火的，因为我偏离了目标。

我希望用户能够点击该按钮，并有导航菜单打开。从那里，用户可以将鼠标放在他们想要的任何地方，直到他们在元素外部单击或进行选择，鼠标才会消失。还有一些小节，我想放在右边。这些也必须被点击，但是如果你将鼠标移出子菜单，这是唯一会消失的东西。主菜单将保持不变。这是我到目前为止的代码，我已经尝试了多种方法，但似乎就是不起作用。我对jQuery或JavaScript知之甚少。

HTML：

代码语言：javascript
复制
<div id="navigation">
                <ul id="nav">
                    <li><a href="#">Navigation</a>
                        <ul class="menu">
                            <li><a href="#">Professional</a>
                                <ul class="submenu">
                                    <li><a href="#">Ambitions</a></li>
                                    <li><a href="#">Resume</a></li>
                                    <li><a href="#">Portfolio  ></a></li>
                                </ul>
                            </li>
                            <li><a href="#">About Myself</a>
                                <ul class="submenu">
                                    <li><a href="#">My Family</a></li>
                                    <li><a href="#">Interests</a></li>
                                    <li><a href="#">Scrap Book</a></li>
                                </ul>
                            </li>   
                            <li><a href="#">Social Life</a>
                                <ul class="submenu">
                                    <li><a href="#">Social Philosiphy</a></li>
                                    <li><a href="#">My Networks  ></a>
                                        <ul class="submenu">
                                            <li><a href="#" target="_blank">Facebook</a></li>
                                            <li><a href="#" target="_blank">Google+</a></li>
                                            <li><a href="#" target="_blank">Personal Tumblr</a></li>
                                            <li><a href="#" target="_blank">YouTube</a></li>
                                            <li><a href="#" target="_blank">Twitter</a></li>
                                            <li><a href="#" target="_blank">Deviant Art</a></li>
                                            <li><a href="#" target="_blank">Sound Cloud</a></li>
                                            <li><a href="#" target="_blank">Github</a></li>
                                            <li><a href="#" target="_blank">Diaspora</a></li>
                                            <li><a href="#" target="_blank">MySpace</a></li>
                                            <li><a href="#" target="_blank">about.me</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

CSS：

代码语言：javascript
复制
#navigation {
    width:300px;
    height:40px;
    float:left;
    margin-top:-4px;
}

#navigation a {
    margin:0px auto;
    color:#ccc;
    outline:none;
    z-index:5; 
}

 #nav {
    padding:7px 6px 10px 0px;
    background:none;
    line-height: 100%;
    display:inline-block;
   }

 #nav li {
    margin:0 0 0 5px;
    padding:0 0 0 0px;
    float:left;
    position:relative;
    list-style:none;
  }

 #nav a {
    border-radius:20px 25px 0 10px;
    border-top:solid 3px #fff;
    border-left:solid 3px #fff;
    font-weight:bold;
    color:#fff;
    background:none;
    text-decoration:none;
    display:block;
    padding:8px 20px;
}

    /* hovers and current tabs */
#nav a:hover {
    border-radius:10px;
    background:none;
    color:#ccc;
}

  #nav .current a {
    border-radius:20px 25px 0 10px;
    background:none;
    color:#ccc;
    margin-bottom:0px;
    border-top:solid 3px #ccc;
    border-left:solid 3px #ccc;
}

  #nav li:hover > a {
    border-radius:20px 25px 0 10px;
    background:none;
    color: #ccc;
    margin-bottom:0px;
    border-top: solid 3px #ccc;
    border-left:solid 3px #ccc;
}

 #nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#333;
    border-top:solid 1px #dfdfdf;
}

 #nav ul a:hover { 
    color:black !important;
}

 /* dropdown */
  #nav li:hover > ul { 
    display:block; 
    background-color:#fff; 
    border-radius:10px 10px 10px 10px;
}

/* level 2 list */
  #nav ul {
    display:none;
    margin: 0;
    padding:0;
    width:150px;
    position:absolute;
    top:33px;
    left:0;
    background:#aaa;
    border:solid 1px #b4b4b4;
}

  #nav ul:hover { 
    background-color:#ddd;
}

  #nav ul li {
    z-index:5;
    font-weight:bold;
    float:none;
    margin:0px;
    padding:0px;
}

 #nav ul a { 
    font-weight:normal;
}
html
css
navigation
onclick
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-03-23 05:55:49

这是一个非常简单的点击导航菜单：

http://jsfiddle.net/jtbowden/WGVum/

代码非常简单：

代码语言：javascript
复制
$('#navigation').on('click', 'a[href="#"]', function() {
    $('#navigation ul').hide();  // Hide everything when we click
    var submenu = $(this).next('ul');  // Find the associated sub-menu
    submenu.parentsUntil('#navigation').andSelf().show(); // Show all hierarchy above
});

在这种情况下，我们只响应以#作为href的点击。这也可以是一个类或任何其他属性。

如果您想在单击其他位置时隐藏菜单，并在单击时切换子菜单，则可以使用以下代码：

代码语言：javascript
复制
$('#navigation').on('click', 'a[href="#"]', function() {
    var submenu = $(this).next('ul');
    $('#navigation ul').not(submenu).hide();
    submenu.parentsUntil('#navigation', 'ul').show().end().toggle();
    return false;
});

$(document).click(function() {
    $('#navigation ul ul').hide();
});

演示：http://jsfiddle.net/jtbowden/WGVum/3/

票数 0
EN

Stack Overflow用户

发布于 2012-03-23 05:31:53

看看这把小提琴：http://jsfiddle.net/5h6Vp/3/

代码语言：javascript
复制
$(document).on('click', function(e){
    if($(e.target).parents('#menu').length > 0){
        /*click in #menu*/
    }else if($(e.target).attr('id') == 'show'){
        $('#menu').toggle();
    }else{
        $('#menu').hide();
    }
});

对子菜单使用以下代码：

代码语言：javascript
复制
$('#menu>ul>li').has('ul').on('click', function(e){
    $('#menu>ul>li>ul').hide();
    $(this).find('ul').show();
});
$('#menu>ul>li>ul').on('mouseleave', function(e){
    $(this).hide();
});
$('#menu').on('mouseleave', function(e){
    $('#menu>ul>li>ul').hide();
});

(我在你粘贴代码之前写了这个答案，所以我的代码结构有点不同--但想法是一样的)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/9830556

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档