导航菜单无法隐藏/显示（自适应设计）

下面是我提供的这个编码。这是为了响应式设计。当我点击标志时，它不想隐藏或显示。导航菜单无法隐藏/显示（自适应设计）

.toggle-nav { 
 
    display: none; 
 
} 
 
.menu { 
 
    float: right; 
 
} 
 
.menu ul { 
 
    display: inline-block; 
 
} 
 
.menu li { 
 
    float: left; 
 
    list-style: none; 
 
    font-size: 17px; 
 
    text-align: right; 
 
} 
 
.menuLink a { 
 
    font-size: 20px; 
 
    color: #FFF; 
 
    margin: 20px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    float: left; 
 
    font-family: 'alegreya_sansregular'; 
 
    cursor: pointer; 
 
} 
 
.menuLink a:hover, 
 
.menu .current-item a { 
 
    border-bottom: 4px double #FFF; 
 
} 
 
.fixedPosition { 
 
    position: fixed !important; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
@media only screen and (max-width: 820px) { 
 
    .menu { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .menu ul.active { 
 
    display: none; 
 
    } 
 
    .menu ul { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 90%; 
 
    left: -55px; 
 
    padding: 10px 18px; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #cecece; 
 
    } 
 
    .menu ul:after { 
 
    width: 0px; 
 
    height: 0px; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 87px; 
 
    content: ''; 
 
    transform: translate(0%, -100%); 
 
    border-left: 7px solid transparent; 
 
    border-right: 7px solid transparent; 
 
    border-bottom: 7px solid #cecece; 
 
    } 
 
    .menu li { 
 
    margin: 5px 0px; 
 
    float: none; 
 
    display: inline-block; 
 
    } 
 
    .menuLink a { 
 
    display: block; 
 
    font-size: 15px; 
 
    margin: 10px 0; 
 
    padding: 5px 0; 
 
    float: none; 
 
    } 
 
    .menuLink a:hover, 
 
    .menu .current-item a { 
 
    border-bottom: none; 
 
    color: #666; 
 
    } 
 
    .toggle-nav { 
 
    padding: 20px; 
 
    float: left; 
 
    display: inline-block; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #cecece; 
 
    color: #777; 
 
    font-size: 20px; 
 
    transition: color linear 0.15s; 
 
    } 
 
    a.toggle-nav { 
 
    padding: 10px; 
 
    margin: 20px; 
 
    } 
 
    .toggle-nav:hover, 
 
    .toggle-nav.active { 
 
    color: #C3c3c3; 
 
    border-bottom: none; 
 
    position: relative; 
 
    } 
 
}

<nav class="menu"> 
 
    <ul class="menuLink"> 
 
    <li> <a class="link-nav" data-scroll-nav="0"> HOME </a> 
 
    </li> 
 
    <li> <a href="works"> WORKS </a> 
 
    </li> 
 
    <li> <a data-scroll-nav="2"> ABOUT </a> 
 
    </li> 
 
    <li> <a data-scroll-nav="3"> CONTACT </a> 
 
    </li> 
 
    </ul> 
 
    <a class="toggle-nav" href="#">&#9776;</a> 
 
</nav>

这里是。

在我点击之前，菜单停留在那里，不想隐藏。我想要的是菜单必须先隐藏，然后才能点击徽标。此外，菜单可以在点击徽标时隐藏。任何想法？

来源

2015-03-13 smallcaterpillar

只是用这个jQuery

$('.toggle-nav').click(function(){ 
    $(this).parent().find('.menuLink').toggle(); 
});

FIDDLE

来源

2015-03-13 14:25:33 Patrick

这就是真正的工作。无论如何，首先如何隐藏菜单？我不想在点击徽标菜单之前显示菜单。 – smallcaterpillar 2015-03-13 14:30:25

只需在菜单css中设置一个显示：无。（.menuLink {display：none}） – Patrick 2015-03-13 14:31:41

不，它不起作用。菜单仍在显示。我试图使用'.menu {display：none;}'仍然不起作用。你可以在JSFiddle上试试这个吗？谢谢。 – smallcaterpillar 2015-03-13 14:35:23

这是我的扩展和动画menue的例子。

https://jsfiddle.net/9bn5t0kj/8/

$('.menu-header').on('click', function() { 
 
    $(this).next().toggleClass('menu-item-open'); 
 
    $('.menu-item').not($(this).next()).removeClass('menu-item-open'); 
 
}); 
 

 
$(document).on('click', function(e) { 
 
    var clickedItem = $(e.target); 
 
    
 
    if (clickedItem.is($('.menu-header')) || clickedItem.is($('.menu-item'))) { 
 
     console.log(clickedItem); 
 
     return; 
 
    } 
 
     
 
    $('.menu-item').removeClass('menu-item-open'); 
 
});

.menu-item-container { 
 
    float: left; 
 
} 
 

 
.menu-header { 
 
    -webkit-user-select: none; 
 
    cursor: pointer; 
 
} 
 

 
.menu-item { 
 
    height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: height .25s; 
 
} 
 

 
.menu-item-open { 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <div class="menu-item-container"> 
 
     <div class="menu-header">Open 1</div> 
 
     <div class="menu-item"> 
 
      Hej hopp!<br> 
 
      Hej hopp!<br> 
 
      Hej hopp!<br> 
 
      Hej hopp!<br> 
 
      Hej hopp!<br> 
 
     </div> 
 
    </div> 
 
    <div class="menu-item-container"> 
 
     <div class="menu-header">Open 2</div> 
 
     <div class="menu-item"> 
 
      Hej hopp 2!<br> 
 
      Hej hopp 2!<br> 
 
      Hej hopp 2!<br> 
 
      Hej hopp 2!<br> 
 
      Hej hopp 2!<br> 
 
     </div> 
 
    </div>

来源

2015-03-13 14:23:23

您可以在默认情况下jQuery隐藏并在点击.toggle-nav时显示。这很简单。

$(document).ready(function() { 
 
    $('.menuLink').hide(); 
 
    $('.toggle-nav').click(function() { 
 
    $('.menuLink').toggle(); 
 
    }); 
 
});

.toggle-nav { 
 
    display: none; 
 
} 
 
.menu { 
 
    float: right; 
 
} 
 
.menu ul { 
 
    display: inline-block; 
 
} 
 
.menu li { 
 
    float: left; 
 
    list-style: none; 
 
    font-size: 17px; 
 
    text-align: right; 
 
} 
 
.menuLink a { 
 
    font-size: 20px; 
 
    color: #FFF; 
 
    margin: 20px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    float: left; 
 
    font-family: 'alegreya_sansregular'; 
 
    cursor: pointer; 
 
} 
 
.menuLink a:hover, 
 
.menu .current-item a { 
 
    border-bottom: 4px double #FFF; 
 
} 
 
.fixedPosition { 
 
    position: fixed !important; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
@media only screen and (max-width: 820px) { 
 
    .menu { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .menu ul.active { 
 
    display: none; 
 
    } 
 
    .menu ul { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 90%; 
 
    left: -55px; 
 
    padding: 10px 18px; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #cecece; 
 
    } 
 
    .menu ul:after { 
 
    width: 0px; 
 
    height: 0px; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 87px; 
 
    content: ''; 
 
    transform: translate(0%, -100%); 
 
    border-left: 7px solid transparent; 
 
    border-right: 7px solid transparent; 
 
    border-bottom: 7px solid #cecece; 
 
    } 
 
    .menu li { 
 
    margin: 5px 0px; 
 
    float: none; 
 
    display: inline-block; 
 
    } 
 
    .menuLink a { 
 
    display: block; 
 
    font-size: 15px; 
 
    margin: 10px 0; 
 
    padding: 5px 0; 
 
    float: none; 
 
    } 
 
    .menuLink a:hover, 
 
    .menu .current-item a { 
 
    border-bottom: none; 
 
    color: #666; 
 
    } 
 
    .toggle-nav { 
 
    padding: 20px; 
 
    float: left; 
 
    display: inline-block; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #cecece; 
 
    color: #777; 
 
    font-size: 20px; 
 
    transition: color linear 0.15s; 
 
    } 
 
    a.toggle-nav { 
 
    padding: 10px; 
 
    margin: 20px; 
 
    } 
 
    .toggle-nav:hover, 
 
    .toggle-nav.active { 
 
    color: #C3c3c3; 
 
    border-bottom: none; 
 
    position: relative; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="menu"> 
 
    <ul class="menuLink"> 
 
    <li> <a class="link-nav" data-scroll-nav="0"> HOME </a> 
 
    </li> 
 
    <li> <a href="works"> WORKS </a> 
 
    </li> 
 
    <li> <a data-scroll-nav="2"> ABOUT </a> 
 
    </li> 
 
    <li> <a data-scroll-nav="3"> CONTACT </a> 
 
    </li> 
 
    </ul> 
 
    <a class="toggle-nav" href="#">&#9776;</a> 
 
</nav>

来源

2015-03-13 14:42:25

导航菜单无法隐藏/显示（自适应设计）

回答

相关问题