JSFiddle

Question

尝试使用slideToggle函数找出如何在div上滑动text / 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的高度吗？我希望有一种简单而干净的方法来做到这一点。

干杯，罗布

Answer 1

看看我创造的这个小提琴

JSFiddle

所以我所做的就是将所有内容都包含在#container中并给它.toggle样式，所以现在我们将所有内容都放在一个绝对底部的容器中，然后我所做的一切都被删除了从问题框中绝对定位，以便它重新获得它的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();
});

记住$是一个函数，所以如果你使用相同的元素，你应该在变量中定义它并重新使用它而不是获取元素Twice - 这将有助于性能

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

JS

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

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

是这个吗？

希望这有帮助！

在jQuery slideToggle上滑动文本

2 个答案:

JSFiddle

JSFiddleNew