【问题标题】：Slide Text on top of jQuery slideToggle在 jQuery slideToggle 上滑动文本
【发布时间】：2013-06-04 05:07:56
【问题描述】：

试图弄清楚如何使用 slideToggle 函数在 div 上滑动文本/div。

基本上我希望有一个标签可供用户点击（现在它只是文本），当点击弹出幻灯片时。我已经设置好了所有东西，但问题是当 div 向上滑动时，切换按钮也需要在其顶部向上滑动。

这里是 JS 小提琴：http://jsfiddle.net/c2WaV/1/（参见右下角的切换）。

jQuery:

$(document).ready(function () {

    $(".questionBox").hide();
    $(".toggle").show();

    $('.toggle').click(function () {
        $(".questionBox").slideToggle();
    });

});

HTML：

<body>
    <a href="#" class="toggle">Toggle</a>

    <div class="questionBox">
        Info inside the toggled box
    </div>
</body>

CSS

.questionBox {
    display:none;
    position:absolute;
    bottom:0;
    right: 20px;
    height:200px;
    background-color: grey;
    color: #FFFFFF;
    padding:20px;
}
.toggle {
    display:none;
    position:absolute;
    bottom:0;
    right: 0;
}

我是否应该将其设置为向上滑动到正在滑动的 div 的高度？我希望有一种简单而干净的方法来做到这一点。

干杯，罗伯

【问题讨论】：

标签： jquery css

【解决方案1】：

看看我创建的这个小提琴

JSFiddle

所以我所做的是将所有内容包装在#container 中并赋予它 .toggle 样式，所以现在我们将所有内容放在一个绝对底部的容器中，然后我所做的一切都被删除了来自 Question 框的绝对定位，以便它重新获得其 DOM 空间，以便当它向上滑动时，它会将所有东西向上推。

最终代码是

<div id="container">
    <a href="#" class="toggle">Toggle</a>
    <div class="questionBox">Info inside the toggled box </div>
</div>

.questionBox {
    display:none;
    height:200px;
    background-color: grey;
    color: #FFFFFF;
    padding:20px;
}
#container {
    display:none;
    position:absolute;
    bottom:0;
    right: 0;
}

我也做了一些调整，这里是新链接

JSFiddleNew

注意我把你的 jQuery 改成了这个

var $questionBox = $(".questionBox");

$questionBox.hide();
$("#container").show();

$('.toggle').click(function () {
    $questionBox.slideToggle();
});

请记住 $ 是一个函数，因此如果您使用相同的元素，您应该在变量中定义它并重复使用它而不是两次获取元素 - 这将有助于提高性能

【讨论】：

非常感谢您的帮助 - 工作就像一个魅力，做了一些调整，所以切换开始一点点向左，不会通过点击水平移动，但这是完美的。我没想过要尝试这个，因为我认为 DIV 必须在加载时隐藏，我现在明白了逻辑。再次感谢

【解决方案2】：

见链接：http://jsfiddle.net/c2WaV/1/

html

<div id="container">
   <a href="#" class="toggle">Toggle</a>
   <div class="questionBox">Info inside the toggled box </div>
</div>

css

.questionBox {
   display:none;
   height:200px;
  background-color: grey;
  color: #FFFFFF;
  padding:20px;
}
#container {
  display:none;
  position:absolute;
  bottom:0;
  right: 0;
}

$(document).ready(function () {
  $(".questionBox").hide();
  $("#container").show();

  $('.toggle').click(function () {
      $(".questionBox").slideToggle();
  });
});

这是？

希望对您有所帮助！

【讨论】：

这个链接到我的小提琴？根据我所见，您是正确的，但@Connor 首先在下面回答。非常感谢您的帮助:)
哈哈，是的。我最终无意中完成了你的代码：/ 你解决了这个问题有什么好处