Question

我想要创建一个带有链接的div面板，当点击该链接时，从右侧滑动面板，我的工作正常，但我希望通过div面板推出可点击链接并且＆＃ 39;这是我无法弄清楚的，虽然我猜它真的很简单。

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

当我点击链接时，我可以让面板滑动，但是当它滑入时，可点击的链接就位于面板上方，我需要它与面板一起滑出，我需要它像这样工作{{3}我没有使用那个例子的原因是因为我需要滑动面板在标题div中滑动而不是像这个例子那样的body 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

Answer 2

以下是一个工作示例：https://jsfiddle.net/ruo8r7o8/2/

基本上，你想要做的是：

失去float ..这会使计算复杂化
为整个盒子设置动画，而不仅仅是一个部分

Javascript操作：

$(function(){
    $('.slide-toggle').click(function(){
      $('.quick-contact').animate({
        right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
      })
    });
  });

CSS操作：

.quick-contact {
  position: absolute;
  right: 0;
}

.slide-toggle {
  position: relative;
  background-color: red;
}

.box {
  position: absolute;
  right: -100px;
  width: 100px;
  background-color: green;
}

使用固定标题滑入div

2 个答案: