Javascript 切换显示/隐藏Div Onclick
我在设计的移动导航元素布局上的定位有问题 因为我在点击导航按钮显示移动导航链接时使用了各种Z索引和定位,所以我的部分设计仍然可见,它模糊了“返回正常”导航按钮 我想做的是在代码中添加一些JavaScript,它将删除/隐藏我的正常设计中的一部分,即单击时遮挡导航按钮,然后再次单击时切换回正常显示 以下是我正在使用的JS:Javascript 切换显示/隐藏Div Onclick,javascript,jquery,css,mobile,navigation,Javascript,Jquery,Css,Mobile,Navigation,我在设计的移动导航元素布局上的定位有问题 因为我在点击导航按钮显示移动导航链接时使用了各种Z索引和定位,所以我的部分设计仍然可见,它模糊了“返回正常”导航按钮 我想做的是在代码中添加一些JavaScript,它将删除/隐藏我的正常设计中的一部分,即单击时遮挡导航按钮,然后再次单击时切换回正常显示 以下是我正在使用的JS: jQuery(document).ready(function($){ //move nav element position according to window
jQuery(document).ready(function($){
//move nav element position according to window width
moveNavigation();
$(window).on('resize', function(){
(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
});
//mobile version - open/close navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
if($('header').hasClass('nav-is-visible')) $('.moves-out').removeClass('moves-out');
$('header').toggleClass('nav-is-visible');
$('.cd-main-nav').toggleClass('nav-is-visible');
$('.cd-main-content').toggleClass('nav-is-visible');
});
//mobile version - go back to main navigation
$('.go-back').on('click', function(event){
event.preventDefault();
$('.cd-main-nav').removeClass('moves-out');
});
//open sub-navigation
$('.cd-subnav-trigger').on('click', function(event){
event.preventDefault();
$('.cd-main-nav').toggleClass('moves-out');
});
function moveNavigation(){
var navigation = $('.cd-main-nav-wrapper');
var screenSize = checkWindowWidth();
if ( screenSize ) {
//desktop screen - insert navigation inside header element
navigation.detach();
navigation.insertBefore('.cd-nav-trigger');
} else {
//mobile screen - insert navigation after .cd-main-content element
navigation.detach();
navigation.insertAfter('.cd-main-content');
}
}
function checkWindowWidth() {
var mq = window.getComputedStyle(document.querySelector('header'), '::before').getPropertyValue('content').replace(/"/g, '').replace(/'/g, "");
return ( mq == 'mobile' ) ? false : true;
}
});
所以我想做的是在这个函数中添加一个删除div的函数:“#bar_bg_default”onclick,然后在再次单击时再次显示它
像这样的东西会起作用,但我如何将它融入我的Nav JS代码中呢
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<a href="#" onclick="toggle_visibility('bar_bg_default');">Click here to toggle visibility of element #bar_bg_default</a>
<div id="bar_bg_default">This is foo</div>
我是福
Jsfiddle将非常有用。Jsfiddle将非常有用。