【问题标题】:Push down menu links not working下推菜单链接不起作用
【发布时间】:2014-04-01 20:18:22
【问题描述】:

我有一个简单的下推菜单,但是当您单击它们时,该链接会关闭菜单 - 当您浏览它们时它们会突出显示,当您单击它们时它们也会突出显示,但是菜单只是关闭而不移动到所选页面?

#nav-mobile {
    display: block;
    padding-top: 12px;
    height: auto;
    min-height: 33px;
    overflow: hidden;
    font-size: 0.9em;
     background: none;  
}

#nav-mobile, #nav-mobile ul, #nav-mobile li {
    position: relative; 
      background: none;  
}
#nav-mobile ul {
    margin: 0;
    padding: 0;
    width: 100%;
      background: none;  
}
#nav-mobile ul li {
    width: 100%;
    display: block; 
    padding: 13px 0 13px 0;
    margin: 0;
      background: none;  
}
#nav-mobile ul a:hover {
    background: none;   
}
#nav-mobile ul li:hover {
    background: none;
}

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

    $('#nav-mobile ul').hide();
    $('#nav-mobile').click(function(e) {
        e.preventDefault();
        $('#nav-mobile ul').slideToggle();
    });
});
</script>

  <div id="nav-mobile">
    <a href="#">Menu</a>
<ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="whyus.html">Why us?</a></li>
        <li><a href="faqs.html">FAQs</a></li>
        <li><a href="careers.html">Career</a></li>
        <li id="last-child"><a href="contactus.html">Contact us</a></li>
        <li id="last-child"><a href="#">Portal</a></li> 
    </ul>
</div>

【问题讨论】:

  • e.preventDefault(); 会阻止浏览器跟随href标签中的url

标签: javascript jquery css html menu


【解决方案1】:

e.preventDefault(); 阻止链接 - 删除它!

容器的点击事件总是首先触发 - 所以滑动切换也可能是个问题!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-07-31
    • 2015-06-10
    • 1970-01-01
    • 1970-01-01
    • 2015-07-02
    • 1970-01-01
    • 2021-05-04
    • 1970-01-01
    相关资源
    最近更新 更多