我正在研究shopify。 https://vapiuminc.myshopify.com/
如果您打开该页面。通过单击右上角的图标,您将在右侧获得导航栏。我添加了一个关闭按钮来隐藏导航。但是我无法通过点击它来改变它。
以下功能用于显示和隐藏主题菜单。
show: function(){
$hamburger.addClass('open');
$('.js-searchToggle').focus();
$('.js-searchToggle').attr('tabindex','0').attr('aria-expanded', true);;
$('.last-focusable-element').attr('tabindex','0');
$body.add('html').addClass('nav--is-hiding');
$('.nav-inner').css({
'transform': 'none'
});
$('.header-fix-cont-inner, .bodyWrap, .siteAlert, .main-logo').css({
'transform': 'translateX(-'+$('.nav-inner').width()+'px)'
});
$(window).on('resize.siteNav', function() {
$('.header-fix-cont-inner, .bodyWrap').css({
'transform': 'translateX(-'+$('.nav-inner').width()+'px)'
});
});
var activeEl = document.activeElement;
if($(activeEl).hasClass('js-menuToggle ')){
$('body').on('keydown', function(e) {
if(e.which == 9){
$('.js-searchToggle').focus();
}
});
}
$('body').on('keydown', function(e) {
if (e.which == 9) {
var activeEl = document.activeElement;
if($(document.activeElement).hasClass('last-focusable-element')){
Site.nav.hide();
$('.last-focusable-element').attr('tabindex','-1');
}
}
});
$('.visible-nav-link').each(function(){
$(this).removeAttr('tabindex');
});
$('body').on('keydown', function(e) {
var activeEl = document.activeElement;
var sibling = $(activeEl).next();
if($(sibling).hasClass('is-visible') && e.which == 9 ){
$('.submenu-item--link').each(function(){
$(this).attr('tabindex','0');
});
}
if($(activeEl).data('last') == true && e.which == 9){
var menu = $(activeEl).parents().eq(3);
$(menu).removeClass('submenu--is-visible');
$('.submenu-item--link').each(function(){
$(this).attr('tabindex','-1');
});
}
});
$('.js-searchToggle').attr('tabindex','0');
$('#shopName').attr('tabindex','-1');
$('#cartTotal').attr('tabindex','-1');
},
hide: function(){
$hamburger.removeClass('open');
$body.add('html').addClass('nav--is-visible');
$('.nav-inner, .header-fix-cont-inner, .bodyWrap, .siteAlert, .main-logo').add($hamburger).css({
'transform': 'none',
});
$('.nav-inner').add($hamburger).css({
'transform': 'translate(100%)',
});
$(window).off('resize.siteNav');
setTimeout(function(){
$body.add('html').removeClass('nav--is-visible');
$body.add('html').removeClass('nav--is-hiding');
}, 300);
// close search too
if ($('.nav-container').hasClass('search--is-visible')){
Site.nav.search.close();
}
$('.visible-nav-link').each(function(){
$(this).attr('tabindex','-1');
});
$('.js-searchToggle').removeAttr('tabindex').attr('aria-expanded', false);
$('#shopName').attr('tabindex','0');
$('#cartTotal').attr('tabindex','0');
},
请点击上面的十字按钮,帮我看一些js函数来隐藏导航栏,
谢谢