0

试图弄清楚如何使用 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 的高度？我希望有一种简单而干净的方法来做到这一点。

干杯，罗伯

4

2 回答 2

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();
});

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

于 2013-06-07T19:59:40.527 回答
0

见链接：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();
  });
});

这是？

希望这有帮助！

于 2013-06-07T20:06:25.830 回答