笔在这里
当两个元素都基于一个类的存在而单击链接/按钮时,我已经设置了两个元素来更改宽度,增加或减少。只有if
一节if...else
中的.toggle
功能似乎是工作。抽屉会打开,但随后在单击触发元素时不会关闭,尽管通过单击触发元素仍可以成功地来回更改类,但抽屉仍会关闭。
我在这里想念什么?谢谢。
var container = document.getElementById('container');
container.widthOpen = '800px';
container.widthClosed = '210px';
container.isOpen = function() {
return this.classList.contains('open');
};
container.toggle = function() {
this.classList.toggle('open');
if (this.isOpen) {
$(this).animate({
width: container.widthOpen
});
} else {
$(this).animate({
width: container.widthClosed
});
}
};
var drawer = document.getElementById('drawer');
drawer.widthOpen = '600px';
drawer.widthClosed = '10px';
drawer.isOpen = function() {
return this.classList.contains('open');
};
drawer.toggle = function() {
this.classList.toggle('open');
if (this.isOpen) {
$(this).animate({
width: drawer.widthOpen
});
} else {
$(this).animate({
width: drawer.widthClosed
});
}
};
$('#toggle').click(function() {
drawer.toggle();
container.toggle();
});
<div id="container">
<section id="main">
<p id="static">
This should be static.
</p>
</section>
<section id="drawer">
<div id="wrapper">
<blockquote id="filler-text" cite="http://genius.com/The-pharcyde-passin-me-by-lyrics/">
<p>Now in my younger days I used to sport a shag</p>
<p>When I went to school I carried lunch in a bag</p>
<p>With an apple for my teacher cause I knew I'd get a kiss</p>
<p>Always got mad when the class was dismissed</p>
<footer>
-
<cite>
<a href="http://genius.com/The-pharcyde-passin-me-by-lyrics/">
The Pharcyde
</a>
</cite>
</footer>
</blockquote>
</div>
</section>
<a href="#0" id="toggle">
Toggle right-side section open/closed
</a>
</div>
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300);
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#container
{
font: 300 1rem/1 'Roboto Slab', sans-serif;
color: white;
background: grey;
width: 210px;
height: 339px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 19px 38px rgba(0,0,0,0.3),
0 15px 12px rgba(0,0,0,0.22);
}
#main, #drawer
{
float: left;
}
#main
{
background: #3377bb;
width: 200px;
height: 339px;
}
#main p
{
text-align: center;
margin: 150px auto;
}
#drawer
{
background: crimson;
width: 10px;
height: 339px;
overflow: hidden;
}
#wrapper
{
width: 600px;
float: right;
}
blockquote
{
line-height: 1.5em;
width: 450px;
margin: 100px auto;
}
#toggle
{
float: left;
display: block;
width: 100%;
margin: 50px auto;
text-align: center;
}
if (this.isOpen) {
this.isOpen
是一个功能。只要函数完全存在(条件确实存在),就可以使条件成立。
this.isOpen()
将是调用该函数的返回值。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句