導航菜單無法隱藏/顯示（自適應設計）

下面是我提供的這個編碼。這是爲了響應式設計。當我點擊標誌時，它不想隱藏或顯示。導航菜單無法隱藏/顯示（自適應設計）

.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

導航菜單無法隱藏/顯示（自適應設計）

回答

相關問題