为什么这个函数的else部分不会执行？

Question

钢笔就在这里

当根据两个元素的类的存在点击链接/按钮时,我有两个元素设置来改变宽度,增加或减少.只有if一节if...else中的.toggle功能似乎是工作.抽屉打开但随后在触发元素的后续点击时不会关闭,尽管通过单击触发元素仍然可以成功地来回更改类.

我在这里错过了什么？谢谢.

javascript与jquery

    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();
    });

HTML

    <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>

CSS

    @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;
      }

Answer 1

 if (this.isOpen) {

this.isOpen是一个功能.只要函数存在(它确实存在),这就使条件成立.

this.isOpen() 将是调用该函数的返回值.