Question

我在设计的移动导航元素布局上遇到问题。

因为当你点击导航按钮显示移动导航链接时我使用了各种Z-index和定位，我的部分设计仍然可见，它模糊了“返回正常”导航按钮。

我想要做的是在代码中添加更多JavaScript，它将删除/隐藏我的正常设计中的一部分，该部分在单击时会遮挡Nav按钮，然后在再次单击时切换回正常显示。 / p>

这是我正在使用的JS：

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>

切换显示/隐藏Div Onclick

0 个答案: