菜单不能用jQuery点击

时间：2015-04-02 11:42:07

标签： 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 个答案:

答案 0 :(得分：3)

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

答案 1 :(得分：1)

您可以使用JQuery切换 - JQuery toggle

JSFiddle示例：

A working toggle exaple

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;
}

答案 2 :(得分：0)

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

example

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");
    }
});

答案 3 :(得分：0)

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');            
        }
    });

请参阅demo

相关问题
最新问题