当点击主要内容时，保持可折叠的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面板打开

回答

相关问题