Question

我有以下内容： -

HTML：

<div class="overlay"></div>
<div id="events-sidebar">
  <div class="inner">
    <h3>TAB NAME</h3>
  </div>
  <div id="events-content">
    <div class="events-container">
      <div id="events-info">
        <h1>THE TITLE</h1>
        <h2>THE SUBTITLE</h2> Lorem ipsum dolor sit amet, choro honestatis definitiones ei eum, sit ut erat consul appellantur, usu te illum dissentiunt. Cu viris intellegat efficiendi sit, quo odio partem et
        <span class="arrow-left"></span>
      </div>
    </div>
  </div>
</div>

CSS：

#events-sidebar {
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/menu-left.png);
  height: 440px;
  width: 150px;
  display: block;
  position: fixed;
  left: -70px;
  top: 25%;
  z-index: 9;
  cursor: pointer;
  cursor: hand;
}

#events-sidebar .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
}

#events-sidebar h3 {
  color: @pink;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  line-height: 25px;
  margin: 0;
  margin-left: 22px;
  text-transform: lowercase;
}

#events-content {
  background: #ececec;
  background-repeat: repeat-x;
  height: 419px;
  width: 800px;
  margin-left: -800px;
}

.events-container {
  border: solid 3px #dcdcdc;
  border-radius: 10px;
  margin-left: 90px;
  position: relative;
  top: 46px;
}

.events-container h1 {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 100px;
  text-transform: uppercase;
  color: @pink;
}

.events-container h2 {
  font-family: 'Lato', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: @cyan;
  text-transform: uppercase;
  margin-top: -22px;
  margin-bottom: 10px;
}

#events-info {
  padding: 0 22px;
}

.arrow-left {
  background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/arrow-left.png);
  display: block;
  height: 41px;
  width: 46px;
  position: absolute;
  right: -62px;
  top: 152px;
  cursor: hand;
  cursor: pointer;
}

.overlay {
  opacity: 0.5;
  background: #000000;
  width: 100%;
  height: 100%;
  z-index: 7;
  top: 0;
  left: 0;
  position: fixed;
  display: none;
}

jQuery的：

// Expand Events Sidebar

$('#events-sidebar').click(function(event){
    if(jQuery('#events-sidebar').hasClass('open')) {
        jQuery('#events-sidebar').animate({
           left: "-=800"
        }, 500);     
        jQuery('.overlay').css({
            display: "none"
        }, 500);
        jQuery(this).removeClass('open');
    } else {
        jQuery('#events-sidebar').animate({
            left: "+=730"
        }, 500);
        jQuery('.overlay').css({
            display: "block"
        }, 500);
        jQuery(this).addClass('open');
    }
});

$('#events-content').click(function(event){
    event.stopPropagation();
});

$('.overlay').click(function(event){
        jQuery('#events-sidebar').animate({
           left: "-=800"
        }, 500);     
        jQuery('.overlay').css({
            display: "none"
        }, 500);
        jQuery(this).removeClass('open');
});

[SEE JSFIDDLE]

我遇到的问题是，当我点击.overlay元素关闭events-sidebar时，下次打开events-sidebar时元素会关闭而不是打开，为什么是这种情况发生了，我怎么能阻止它？

如果我将arrow-left添加到click函数，同样的事情正在发生，因为我想让这个可点击以执行相同的操作。

Answer 1

这是一个有效的代码

See this fiddle

// Expand Events Sidebar

    $('#events-sidebar, .overlay').click(function(event){
      if($('.overlay').is(':visible')){
            jQuery('#events-sidebar').animate({
               left: "-=730"
            }, 500);     
            jQuery('.overlay').css({
                display: "none"
            }, 500);
            jQuery('#events-sidebar').removeClass('open');
      }else{
        if(jQuery('#events-sidebar').hasClass('open')) {
          jQuery('#events-sidebar').animate({
             left: "-=730"
          }, 500);     
          jQuery('.overlay').css({
              display: "none"
          }, 500);
          jQuery(this).removeClass('open');
        } else {
          jQuery('#events-sidebar').animate({
              left: "+=730"
          }, 500);
          jQuery('.overlay').css({
              display: "block"
          }, 500);
          jQuery(this).addClass('open');
      }
  }

    });

    $('#events-content').click(function(event){
        event.stopPropagation();
    });

我在.overlay可见的位置添加了一个条件，以便做正确的动画。

Answer 2

您应该将open课程添加/删除至#events-sidebar，而不是this，因为有时this将是#events-siderbar，但有时会是.overlay #events-sidebar。因此，当您点击叠加层以关闭它时，function removeDocType($oldDom) { $node = $oldDom->documentElement->firstChild $dom = new DOMDocument(); foreach ($node->childNodes as $child) { $dom->appendChild($doc->importNode($child, true)); } return $dom->saveHTML(); }仍然有开放课程。

请参阅updated fiddle。

Answer 3

$('#events-sidebar').click(function(event){
        if(jQuery('#events-sidebar').hasClass('open')) {
           jQuery('#events-sidebar').animate({
              left: "<b>-=730</b>"
           }, 500);     
           jQuery('.overlay').css({
               display: "none"
           }, 500);
            jQuery(this).removeClass('open');
        } else {
        jQuery('#events-sidebar').animate({
            left: "+=730"
        }, 500);
        jQuery('.overlay').css({
            display: "block"
        }, 500);
        jQuery(this).addClass('open');
    }
});

$('#events-content').click(function(event){
    event.stopPropagation();
});

`$`('.overlay').click(function(event){
        jQuery('#events-sidebar').animate({
           left: "<b>-=730</b>"
        }, 500);     
        jQuery('.overlay').css({
            display: "none"
        }, 500);
        jQuery(this).removeClass('open');
});

jQuery - 补充工具栏弹出窗口

3 个答案: