當點擊主要內容時，保持可摺疊的div面板打開

我跟隨了一個在線快速教程，向我的網站添加了一個可摺疊的div面板，可通過按鈕打開和關閉。但是，一旦面板被打開，點擊面板外的任何地方都會關閉面板。我的問題是，無論如何要保持面板打開，直到用戶再次單擊打開/關閉按鈕？當點擊主要內容時，保持可摺疊的div面板打開

乾杯， jQuery的小白

<html> 
 
<head> 
 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
 
<style type="text/css"> 
 
#hamburger { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    transition: all 0.3s ease; 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -ms-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    -height: 75px; 
 
    background: #ff99BD; 
 
    z-index: 5; 
 
} 
 
#slider { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    min-height: 100%; 
 
    transition: width 0.3s ease; 
 
    -webkit-transition: width 0.3s ease; 
 
    -moz-transition: width 0.3s ease; 
 
    -ms-transition: width 0.3s ease; 
 
    -o-transition: width 0.3s ease; 
 
    overflow: auto; 
 
    background: #34cbcb; 
 
    -webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55); 
 
    -moz-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55); 
 
    box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55); 
 
    z-index: 1; 
 
} 
 
#main { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    transition: all 0.3s ease; 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -ms-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    overflow: auto; 
 
    background: #343434; 
 
    z-index: 3; 
 
} 
 
    .slide-away { 
 
    transform: translate(250px, 0); 
 
    -webkit-transform: translate(250px, 0); 
 
    -moz-transform: translate(250px, 0); 
 
    -ms-transform: translate(250px, 0); 
 
    -o-transform: translate(250px, 0); 
 
} 
 
button { 
 
    color: #eee; 
 
    background: #343434; 
 
    font-size: 24px; 
 
    line-height: 1em; 
 
    padding: 20px; 
 
    border: none; 
 
} 
 
button:hover { 
 
    color: #bbb; 
 
    background: #565656; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="hamburger"><button>Slide</button></div> 
 
<div id="slider"></div> 
 
<div id="main"></div> 
 
<script> 
 
$('button').click(function() { 
 
$('#hamburger').toggleClass('slide-away'); 
 
$('#main').toggleClass('slide-away'); 
 
}); 
 
$('#main').click(function() { 
 
$('#hamburger').removeClass('slide-away'); 
 
$('#main').removeClass('slide-away'); 
 
}); 
 
</script> 
 
</body> 
 
</html>

來源

2014-11-04 Eric

你能提供一些代碼嗎？這是一個猜謎遊戲atm。 – Digitalis 2014-11-04 00:20:18

或至少有一個鏈接到有問題的網站 – Digitalis 2014-11-04 00:20:50

您的代碼是什麼在這裏問題，但你沒有提供它。我們無法確診。 – 2014-11-04 00:33:00

刪除第二次點擊事件

$('#main').click(function() { 
    $('#hamburger').removeClass('slide-away'); 
    $('#main').removeClass('slide-away'); 
});

它你不想什麼。

來源

2014-11-04 00:41:35 skobaljic

你是對的，忽略了這一點。我會刪除我的答案。 – Digitalis 2014-11-04 00:44:25

非常感謝！這只是凝視着我的臉..哈哈 – Eric 2014-11-04 00:48:52

並感謝仍然洋地黃的幫助:) – Eric 2014-11-04 00:49:30

當點擊主要內容時，保持可摺疊的div面板打開

回答

相關問題