努力獲得一些基本的JQuery和JS代碼

在下面的代碼中，當menuLeft具有類'cbp-spmenu-open'時，它會顯示在屏幕上。當它沒有這個類時，它不在屏幕上。努力獲得一些基本的JQuery和JS代碼

我試圖做一些代碼，以便當菜單在屏幕上時，當用戶點擊除菜單之外的任何東西時，它將消失。

在下面我的代碼，林基本上是試圖告訴它：

如果菜單屏幕上，點擊任何東西，但網頁製作菜單消失。

不太確定我出錯的地方，所以如果有人可以發佈一些很棒的正確代碼！謝謝。

if ($('.menuLeft').hasClass('cbp-spmenu-open')) { 
     $("*").not("#menuRight").click(function() { 
     classie.toggle(menuLeft, 'cbp-spmenu-open'); 
    }); 
}

編輯：

var menuLeft = document.getElementById('cbp-spmenu-s1'), 
     menuRight = document.getElementById('cbp-spmenu-s2'), 
     menuTop = document.getElementById('cbp-spmenu-s3'), 
     menuBottom = document.getElementById('cbp-spmenu-s4'), 
     // showLeft = document.getElementById('showLeft'), 
     showRight = document.getElementById('showRight'), 
     showTop = document.getElementById('showTop'), 
     showBottom = document.getElementById('showBottom'), 
     showLeftPush = document.getElementById('showLeftPush'), 
     showRightPush = document.getElementById('showRightPush'), 
     body = document.body; 

     var showLeft=document.getElementsByClassName('showLeft'); 
     for(var i=0;i<showLeft.length;i++) { 
      showLeft[i].onclick = function() { 
      classie.toggle(this, 'active'); 
      classie.toggle(menuLeft, 'cbp-spmenu-open'); 
      disableOther('showLeft'); 
}; 

} 

// showLeft.onclick = function() { 
// classie.toggle(this, 'active'); 
// classie.toggle(menuLeft, 'cbp-spmenu-open'); 
// disableOther('showLeft'); 
// }; 
showRight.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuRight, 'cbp-spmenu-open'); 
    disableOther('showRight'); 
}; 
showTop.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuTop, 'cbp-spmenu-open'); 
    disableOther('showTop'); 
}; 
showBottom.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(menuBottom, 'cbp-spmenu-open'); 
    disableOther('showBottom'); 
}; 
showLeftPush.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(body, 'cbp-spmenu-push-toright'); 
    classie.toggle(menuLeft, 'cbp-spmenu-open'); 
    disableOther('showLeftPush'); 
}; 
showRightPush.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(body, 'cbp-spmenu-push-toleft'); 
    classie.toggle(menuRight, 'cbp-spmenu-open'); 
    disableOther('showRightPush'); 
}; 

function disableOther(button) { 
    if(button !== 'showLeft') { 
     classie.toggle(showLeft, 'disabled'); 
    } 
    if(button !== 'showRight') { 
     classie.toggle(showRight, 'disabled'); 
    } 
    if(button !== 'showTop') { 
     classie.toggle(showTop, 'disabled'); 
    } 
    if(button !== 'showBottom') { 
     classie.toggle(showBottom, 'disabled'); 
    } 
    if(button !== 'showLeftPush') { 
     classie.toggle(showLeftPush, 'disabled'); 
    } 
    if(button !== 'showRightPush') { 
     classie.toggle(showRightPush, 'disabled'); 
    } 
}

來源

2015-02-09 George

你的代碼的結果是什麼？ – joozek 2015-02-09 20:23:54

什麼是'classie'？ – dave 2015-02-09 20:27:09

如果您的意思是在控制檯中，它會顯示'ReferenceError：Can not find variable：showLeft'。代碼本身對頁面沒有任何影響。 – George 2015-02-09 20:28:17

這不是乾淨的解決方案，但我認爲這會爲你工作與工作

事情是這樣的量最少的：

$("body").click(function(event) { 
    $('.menuRight').addClass('cbp-spmenu-close'); 
}); 

showRightMenu = function(e) { 
    $('.menuRight').removeClass('cbp-spmenu-close'); 
    e.preventDefault(); 
    e.stopPropagation(); 
} 

$(".menuRight").click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
});

這裏是JSFiddle：

http://jsfiddle.net/Lpbxxufd/7/

來源

2015-02-09 21:25:01 adamtoakley

努力獲得一些基本的JQuery和JS代碼

回答

相關問題