Question

我在关闭网站中的活动div时遇到问题。单击菜单时，您将看到菜单面板将从屏幕左侧滑动。截至目前，关闭它的唯一方法是单击x按钮。但是我也有能力当你点击页脚时div会从底部向上滑动。一切正常，但我遇到的问题是当菜单打开并单击页脚时，div将覆盖菜单而不是关闭菜单。反之亦然，当页脚打开并单击菜单时，它也会打开，而不是关闭页脚。

我希望在关闭另一个开放div时打开一个div。怎么会这样做？这是JS和网站http://jsfiddle.net/8en2D/21/

的完整代码

  $(function(){
        window.status=0;
  $('#menu').click(function(){
        if(window.status==0){
              $('#slidingMenu').stop().animate({left:'0px'},500); 
                    window.status=1;
              $('body, html').css('overflow','hidden');
 }
        else{
              $('#slidingMenu').stop().animate({left:'-100%'},500);
                    window.status=0;
              $('body, html').css('overflow-y','scroll');
           }
 });
 })

 /* 1. FOOTER SLIDEUP
 -----------------------------------------------------------------------------------------------
  ===============================================================================================*/
 //Close menu when you click Footer

  $('#more').click(function () {
        var open = $('header').is('.open');
              $('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
              $('header').animate({
                    bottom: (open ? '-' : '+') + '=200'
                }, 400, function () {
  $('header').toggleClass('open');
 });
 });

  $('#menu').click(function () {
        if ($('').is('.open')) {
              $('')
                .removeClass('open')
                .animate({
                'bottom': "-=200"
 }, function () {
        var $footer = $('.activetoggle');

        if ($footer.length) 
            $footer
                .toggleClass('activetoggle footerButton')
                .text('Footer');
 });
    $('footer').slideUp(400);
     }
 });



  $('.footerButton').click(function () {// Change wording once pressed
        var $this = $(this);
  $this.toggleClass('footerButton');
        if ($this.hasClass('footerButton')) {
  $this.text('Footer');
      } else {
    $this.text('Close');
 }
  $(this).toggleClass('activetoggle');
 });

  $(window).resize(function(){ //check when window resize
        if($(window).width() < 780){ // check when the window width is less than 780 
        if ($('header').is('.open')) { 
              $('header')
                .removeClass('open')
                .animate({
                'bottom': "-=200"                
      });
    $footer = $('.activetoggle');
    if ($footer.length) {
         $footer.toggleClass('activetoggle footerButton').text('Footer');
    }
    $('#dropFooter').slideToggle(400);
 }
 }

 });

Answer 1

我能够调整你的jQuery以使其工作。请在此处查看jsfiddle。下面我介绍了我修改的两个主要功能。

$('#menu').click(function () {
//new jquery
        if ($('header').is('.open')) {
            var open = $('header').is('.open');
            $('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
            $('header').animate({
                bottom: (open ? '-' : '+') + '=200'
            }, 400, function () {
                $('header').removeClass('open');
            });
            if ($('.navFooter button').hasClass('activetoggle')) {
                $('.navFooter button').removeClass('activetoggle').addClass('footerButton').text('Footer');
            }
        }
//back to your exisitng code
        if (window.status == 0) {
            $('#slidingMenu').stop().animate({
                left: '0px'
            }, 500);
            window.status = 1;
            $('body, html').css('overflow', 'hidden');
            $('#slidingMenu').addClass('open');
        } else {
            $('#slidingMenu').stop().animate({
                left: '-100%'
            }, 500);
            window.status = 0;
            $('body, html').css('overflow-y', 'scroll');
            $('#slidingMenu').removeClass('open');
        }
    });

$('#more').click(function () {
//new jquery
    if ($('#slidingMenu').is('.open')) {
        $('#slidingMenu').stop().animate({
            left: '-100%'
        }, 500);
        window.status = 0;
        $('body, html').css('overflow-y', 'scroll');
        $('#slidingMenu').removeClass('open');
    }
//back to existing code
    var open = $('header').is('.open');
    $('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
    $('header').animate({
        bottom: (open ? '-' : '+') + '=200'
    }, 400, function () {
        $('header').toggleClass('open');
    });
});

导致您的问题的问题列表很长，我相当确定您仍然有一些无关紧要的代码仍然是不必要的。

多个.click（）函数 - 您点击事件的所有代码一个元素应该在一个函数中完成
缺少或不正确的jQuery选择器 - 在一个区域中我找到了$（''）
缺少菜单打开的通知类（你有这个为页脚实现（称为标题）

单击辅助按钮时关闭活动div

1 个答案: