javascript - 滑入带有固定标题的 div

Question

我想创建一个带有链接的 div 面板，单击该链接会从右侧滑入面板，我可以正常工作，但我希望将可点击的链接与 div 面板一起推出，但我不能弄清楚虽然我猜这很简单。

我的html是:

<div class="quick-contact">

    <div class="slide-toggle">Slide Toggle</div>

            <div class="box">
                    <div class="box-inner">

                    content goes here

                    </div>

            </div>
  </div>

CSS是这样的:

quick-contact {
  background: #ccc;
  float:right;
 }

 .box{
  float:right;
  overflow: hidden;
  background: #f0e68c;
  display: none;
  }

  .slide-toggle {
    float: right;
    position: relative;
    right: 0;
  }

  /* Add padding and border to inner content for better animation effect */
.box-inner{
  width: 400px;
  padding: 10px;
  border: 1px solid #a29415;
  }

jquery 是:

// use this docu ready //
jQuery(function($) {

      $(".slide-toggle").click(function(){
          $(".box").animate({
                   width: "toggle"
                 });
          });

}); // end 

当我单击链接时，我可以让面板滑动，但是当它滑入时，可单击的链接只是位于面板上方，我需要它与面板一起滑出，我需要它像这样工作 http://www.sanwebe.com/assets/floating-contact-form/我不使用该示例的原因是因为我需要滑入面板来滑入标题 div，而不是像本示例那样滑入正文 div。

Answer 1

只需放置您的 <div class="slide-toggle">...</div>之后<div class="box">...</div> (因为您正在使用 float: "right"; )。让它看起来像这样:

<div class="quick-contact">        
  <div class="box">
    <div class="box-inner">
      content goes here
    </div>
  </div>
  <div class="slide-toggle">
    Slide Toggle
  </div>
</div>  

工作示例:http://codepen.io/anon/pen/GoPPPE