Bourbon Refill导航菜单向上滑动

Question

我正在使用Bourbon Refill导航菜单，并希望对其进行修改，以便在小模式中单击链接时菜单会向上滑动。此时菜单下降，但当菜单项被点击时，菜单保持下降。由于我使用带有固定顶级菜单的滚动页面，这意味着很多内容都隐藏在菜单后面。

这里是Codepen代码：

http://codepen.io/mikehdesign/pen/LVjbPv/

我现有的代码如下：

HTML

<header class="navigation" role="banner"> 
<div class="navigation-wrapper"> 
<a href="javascript:void(0)" class="logo"> 
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image"> 
</a> 
<a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">Menu</a> 
<nav role="navigation"> 
    <ul id="js-navigation-menu" class="navigation-menu show"> 
    <li class="nav-link"><a href="javascript:void(0)">About Us</a></li> 
    <li class="nav-link"><a href="javascript:void(0)">Contact</a></li> 
    <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li> 
    <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li> 
    </ul> 
</nav> 

SCSS

.navigation { 
$large-screen: em(860) !default; 
$large-screen: $large-screen; 

// Mobile view 
.navigation-menu-button { 
display: block; 
float: right; 
margin: 0; 
padding-top: 0.5em; 

@include media ($large-screen) { 
    display: none; 
} 
} 

// Nav menu 
.navigation-wrapper { 
@include clearfix; 
position: relative; 
} 

.logo { 
float: left; 

img { 
    max-height: 2em; 
    padding-right: 1em; 
} 
} 

nav { 
float: none; 

@include media ($large-screen) { 
    float: left; 
    line-height: 1.5em; 
    padding-top: 0.3em; 
} 
} 

ul.navigation-menu { 
clear: both; 
display: none; 
margin: 0 auto; 
overflow: visible; 
padding: 0; 
width: 100%; 

@include media ($large-screen) { 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

&.show { 
    display: block; 
} 
} 

// Nav items 
ul li.nav-link { 
display: block; 
text-align: right; 
width: 100%; 

@include media ($large-screen) { 
    background: transparent; 
    display: inline; 
    text-decoration: none; 
    width: auto; 
} 
} 

li.nav-link a { 
display: inline-block; 

@include media ($large-screen) { 
    padding-right: 1em; 
} 
} 
} 

JS

$(document).ready(function() { 
var menuToggle = $('#js-mobile-menu').unbind(); 
$('#js-navigation-menu').removeClass("show"); 

menuToggle.on('click', function(e) { 
e.preventDefault(); 
$('#js-navigation-menu').slideToggle(function(){ 
if($('#js-navigation-menu').is(':hidden')) { 
$('#js-navigation-menu').removeAttr('style'); 
    } 
}); 
}); 
}); 

帮助非常感谢

迈克

Answer 1

所以我整理这通过检测菜单按钮是否是可见的，然后使用该作为JQuery的切换：

$(document).ready(function() { 
    var menuToggle = $('#js-mobile-menu').unbind(); 
    $('#js-navigation-menu').removeClass("show"); 

    $('li.nav-link').on('click', function(){ 
    if($(".navigation-menu-button").is(":visible") ) { 
     menuToggle.trigger('click'); 
} 
    }); 

    menuToggle.on('click', function(e) { 
    e.preventDefault(); 
    $('#js-navigation-menu').slideToggle(function(){ 
     if($('#js-navigation-menu').is(':hidden')) { 
     $('#js-navigation-menu').removeAttr('style'); 
     } 
    }); 
    }); 
}); 

Answer 2

你可以试试...

$('header.navigation').on('click',function(){ 
    $('header.navigation ul.submenu').css('display','none'); 
}) 

Answer 3

看看下面的演示测试在小型和大型工作版本作为您的期望。

EDIT 2

更新拨动的小版本按您的要求。

Codepen

jQuery的

function smallVersion() { 
    $("#js-navigation-menu a").on('click', function(e) { 
    $('#js-navigation-menu').slideToggle(function() { 
     if ($('#js-navigation-menu').is(':hidden')) { 
     $('#js-navigation-menu').removeAttr('style'); 
     } 
    }); 
    }); 
} 

function dothis(){ 
    var ww = $(window).width(); 
    var emToPx = 53.75 * parseFloat($("html").css("font-size")); 
    if(ww < emToPx) { 
     smallVersion(); 
    } 
} 

$(document).ready(function() { 
    var menuToggle = $('#js-mobile-menu').unbind(); 
    $('#js-navigation-menu').removeClass("show"); 

    menuToggle.on('click', function(e) { 
    e.preventDefault(); 
    $('#js-navigation-menu').slideToggle(function(){ 
     if($('#js-navigation-menu').is(':hidden')) { 
     $('#js-navigation-menu').removeAttr('style'); 
     } 
    }); 
    }); 

    dothis(); 
}); 

Answer 4

检查下面的代码，希望它帮助。

我已经使用matchmedia来检查屏幕分辨率。 IE 10及以上版本支持它。对于IE9及更低版本，您可以使用matchmedia polyfill https://github.com/paulirish/matchMedia.js/。

“最小宽度：53.75em”来自Refills css，在此之后它将更改为移动导航。

$('li.nav-link').on('click', function(){ 
    if(!window.matchMedia("(min-width: 53.75em)").matches) { 
     menuToggle.trigger('click'); 
    } 
}) 

http://codepen.io/praveenvijayan/pen/YXrbKB