Javascript 为什么不执行此函数的else部分?
这支笔很漂亮 我已经设置了两个元素来更改宽度,增加或减少,当根据这两个元素的类的存在单击链接/按钮时。只有Javascript 为什么不执行此函数的else部分?,javascript,jquery,if-statement,this,control-flow,Javascript,Jquery,If Statement,This,Control Flow,这支笔很漂亮 我已经设置了两个元素来更改宽度,增加或减少,当根据这两个元素的类的存在单击链接/按钮时。只有.toggle功能中的if…else的if部分似乎在工作。抽屉会打开,但在随后单击触发器元素时不会关闭,尽管通过单击触发器元素仍然可以成功地来回更改类 我错过了什么?谢谢 带jquery的javascript html 此.isOpen是一个函数。这使得只要函数存在(它确实存在),条件就为真 this.isOpen()将是调用该函数的返回值。在哪里定义了classList?this.isOp
.toggle
功能中的if…else
的if
部分似乎在工作。抽屉会打开,但在随后单击触发器元素时不会关闭,尽管通过单击触发器元素仍然可以成功地来回更改类
我错过了什么?谢谢
带jquery的javascript
html
此.isOpen
是一个函数。这使得只要函数存在(它确实存在),条件就为真
this.isOpen()
将是调用该函数的返回值。在哪里定义了classList
?this.isOpen
是一个函数,而不是布尔值?可能需要if(this.isOpen()){…
@marshallclassList
是web api的一部分@marshall-classList
在HTML5规范中定义。
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) {