堆栈内存溢出
  繁体   English   中英

jQuery无法单击菜单

[英]Menu isn't clickable with jQuery

 原文  2015-04-02 11:42:07  9   4    javascript/ jquery/ html/ css

问题描述

我希望菜单最初在加载时隐藏，然后单击文本Menu显示菜单。 当前，菜单始终可见。 为什么是这样？

演示： http ： //jsfiddle.net/eoxug3cz/ 

 $('nav.primary').prepend('<div id="menu-button">Menu</div>'); $('nav.primary #menu-button').on('click', function(){ var menu = $(this).next('ul#menu-header'); if (menu.hasClass('open')) { menu.removeClass('open'); } else { menu.addClass('open'); } }); 
 nav.columns ul { padding-left: 0px; } nav.primary { padding-top:0; text-align:left; float:left; margin-top:0; } nav.primary > ul { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease-out; -moz-transition: max-height 0.35s ease-out; -ms-transition: max-height 0.35s ease-out; -o-transition: max-height 0.35s ease-out; transition: max-height 0.35s ease-out; } nav.primary > ul > li > ul { width: 100%; display: block; } nav.primary.align-right ul li a { text-align: left; } nav.primary > ul > li > ul > li { width: 100%; display: block; } nav.primary.align-right ul ul li a { text-align: left; } nav.primary > ul > li > ul > li > a { width: 100%; display: block; } nav.primary ul li ul li a { width: 100%; } nav.primary.align-center > ul { text-align: left; } nav.primary.align-center > ul > li { display: block; } nav.primary > ul.open { max-height: 1000px; border-top: 1px solid rgba(110, 110, 110, 0.25); } nav.primary ul { width: 100%; } nav.primary ul > li { float: none; width: 100%; } nav.primary ul li a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 12px 20px; } nav.primary ul > li:after { display: none; } nav.primary ul li.has-sub > a:after, nav.primary ul li.has-sub > a:before, nav.primary ul li ul li.has-sub:after, nav.primary ul li ul li.has-sub:before { display: none; } nav.primary ul li ul, nav.primary ul li ul li ul, nav.primary ul li ul li:hover > ul, nav.primary.align-right ul li ul, nav.primary.align-right ul li ul li ul, nav.primary.align-right ul li ul li:hover > ul { left: 0; position: relative; right: auto; } nav.primary ul li ul li, nav.primary ul li:hover > ul > li { max-height: 999px; position: relative; background: none; } nav.primary ul li ul li a { padding: 0px 20px 0px 35px; } nav.primary ul li ul ul li a { padding: 0px 20px 0px 50px; } nav.primary ul li ul li:hover > a { color: #000000; } nav.primary #menu-button { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 15px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #111; cursor: pointer; } nav.primary #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } nav.primary #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; } @media screen and (max-width: 480px) { .sticky-header { padding-top:0px; position:absolute; } nav.primary #menu-button { text-transform:lowercase; padding: 30px 20px 10px 20px; } footer ul li { border: 0; display: block; width: 100%; padding: 0 20px!important; } nav.primary #menu-button:after, nav.primary #menu-button:before { display:none; } .primary-item:hover .sub-menu, .primary-item .sub-menu { margin:0; } .selected { background:#748d1b; color:#fff!important; } li.primary-item { background:#ddd; padding-top:0; padding-bottom:0; border-bottom:2px solid #ccc; } li.primary-item a { display:block; } #menu-button { margin-top: 20px; } nav.primary > ul { margin-top:10px; } nav.primary #menu-button { padding: 10px 20px 10px 20px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <nav class="primary menu right"> <div class="menu-header-container"> <ul id="menu-header" class="menu menu inline naked horizontal bold"> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item"><a href="http://localhost:8888/wordpress/?page_id=13">About</a></li> <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item"><a href="http://localhost:8888/wordpress/?page_id=58">Team</a></li> <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item"><a href="http://localhost:8888/wordpress/?page_id=64">Work</a></li> </ul> </div> </nav>

谢谢。

4 个解决方案

解决方案1
 3  2015-04-02 11:45:49

您的CSS有问题。 使用nav.primary > div > ul代替nav.primary > ul 。 仅对直系子女使用> 。

解决方案2
 1 已采纳  2015-04-02 11:55:09

您可以使用JQuery切换-JQuery切换

JSFiddle示例：

工作切换示例

JS 

$('nav.primary').prepend('<div id="menu-button">Menu</div>');
      $('nav.primary #menu-button').on('click', function(){
          var menuItems = $(".menu-header-container");
          menuItems.toggle();
    });

CSS 

.menu-header-container {
    display:none;
}

解决方案3
 0  2015-04-02 11:51:42

如果我理解正确:)希望这就是您想要的

例

JS 

$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
    if(!$(".menu-header-container").hasClass("opened")) {
        $(".menu-header-container").show();
        $(".menu-header-container").addClass("opened");
    }else {
        $(".menu-header-container").hide();
        $(".menu-header-container").removeClass("opened");
    }
});

解决方案4
 0  2015-04-02 12:00:53

nav.columns ul {
    padding-left: 0px;
  }

  nav.primary {
    padding-top:0;
    text-align:left;
    float:left;
    margin-top:0;
  }
  nav.primary > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  nav.primary > ul > li > ul {
    width: 100%;
    display: block;
  }
  nav.primary.align-right ul li a {
    text-align: left;
  }
  nav.primary > ul > li > ul > li {
    width: 100%;
    display: block;
  }
  nav.primary.align-right ul ul li a {
    text-align: left;
  }
  nav.primary > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }
  nav.primary ul li ul li a {
    width: 100%;
  }
  nav.primary.align-center > ul {
    text-align: left;
  }
  nav.primary.align-center > ul > li {
    display: block;
  }
  nav.primary > ul.open {
    max-height: 1000px;
    border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  nav.primary ul {
    width: 100%;
  }
  nav.primary ul > li {
    float: none;
    width: 100%;
  }
  nav.primary ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
  }
  nav.primary ul > li:after {
    display: none;
  }
  nav.primary ul li.has-sub > a:after,
  nav.primary ul li.has-sub > a:before,
  nav.primary ul li ul li.has-sub:after,
  nav.primary ul li ul li.has-sub:before {
    display: none;
  }
  nav.primary ul li ul,
  nav.primary ul li ul li ul,
  nav.primary ul li ul li:hover > ul,
  nav.primary.align-right ul li ul,
  nav.primary.align-right ul li ul li ul,
  nav.primary.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }
  nav.primary ul li ul li,
  nav.primary ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  nav.primary ul li ul li a {
    padding: 0px 20px 0px 35px;
  }
  nav.primary ul li ul ul li a {
    padding: 0px 20px 0px 50px;
  }
  nav.primary ul li ul li:hover > a {
    color: #000000;
  }
  nav.primary #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #111;
    cursor: pointer;
  }
  nav.primary #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }
  nav.primary #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }

@media screen and (max-width: 480px) {
      .sticky-header {
          padding-top:0px;
          position:absolute;

        }

        nav.primary #menu-button {
          text-transform:lowercase;
          padding: 30px 20px 10px 20px;
        }

        footer ul li {
          border: 0;
          display: block;
          width: 100%;
          padding: 0 20px!important;
        }

        nav.primary #menu-button:after,
        nav.primary #menu-button:before {
          display:none;
        }

        .primary-item:hover .sub-menu, .primary-item .sub-menu {
          margin:0;
        }

        .selected {
          background:#748d1b;
          color:#fff!important;
        }

        li.primary-item {
          background:#ddd;
          padding-top:0;
          padding-bottom:0;
          border-bottom:2px solid #ccc;
        }

        li.primary-item a {
          display:block;
        }

       #menu-button {
            margin-top: 20px;
       }

       nav.primary > ul {
          margin-top:10px;
       }

       nav.primary #menu-button {
         padding: 10px 20px 10px 20px;
       }

  }
div.menu-header-container{
    display:none;
}
div.menu-header-container.open{
    display:block;
}


<nav class="primary menu right">

    <div class="menu-header-container">

        <ul id="menu-header" class="menu menu inline naked horizontal bold">

            <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item"><a href="http://localhost:8888/wordpress/?page_id=13">About</a></li>
            <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item"><a href="http://localhost:8888/wordpress/?page_id=58">Team</a></li>
            <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item"><a href="http://localhost:8888/wordpress/?page_id=64">Work</a></li>

        </ul>

    </div>

</nav>

$('nav.primary').prepend('<div id="menu-button">Menu</div>');
      $('nav.primary #menu-button').on('click', function(){

        var menu = $(this).next('div.menu-header-container');

        if (menu.hasClass('open')) {
          menu.removeClass('open');           
        } else {
          menu.addClass('open');            
        }
    });

观看演示

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery-可点击的下拉菜单 Lavalamp for jQuery：无法获得可点击的第一级菜单 没有标准的jQuery弹出菜单组件吗？ 尝试使用jQuery创建菜单，但我的代码无法正常工作 我的菜单没有使用jQuery正确切换“全屏”类 为什么从MySQL和jQuery .click函数检索的数据中的表行不可单击？ 为什么单选按钮不可点击？ 按钮 onclick，但按钮不可点击 选择后无法点击div 包含可点击的DivElement：不会侦听事件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM