Question

我的jquery slideToggle有问题。

请访问http://en.fjordblink.webhipster.dk/foedekar/并查看按钮。

以下是我正在使用的脚本：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<div id="slidebottom" style="position: relative;">
<button>Button</button>
<div style="position: absolute;">Slide from top and down</div>
</div>

<script>
$('#slidebottom').on('click', clickButton);    
function clickButton()
{
  $(this).stop().slideToggle();
}
</script>

首先，我希望隐藏文本，并在按下预设时首先显示。但他们应该仍然能够通过按下按钮再次隐藏文本。所以，我想要反转slideToggle的效果。

另一个问题是按钮也会切换。这应该始终可见。如果我将按钮移到外面那么它根本不会切换

所有帮助表示赞赏！：）

最诚挚的问候帕特里克

Answer 1

您可以使用：

$(this).find('div').stop().slideToggle();

而不是：

$(this).stop().slideToggle();

因为你想要定位子div元素。

<强> Fiddle Demo

Answer 2

你必须像这样写div之外的按钮并删除绝对位置，否则你将无法获得动画。

<强> HTML

<button id="btn">Button</button>
<div id="slidebottom" style="position: relative;">

    <div>
        Slide from top and down<br>
        Slide from top and down<br>
        Slide from top and down
    </div>
</div>

<强> JAVASCRIPT

$('#btn').click(function(){
    $('#slidebottom').stop().slideToggle('slow');
});

jsfiddle链接在这里

SlideToggle - 反向切换和按钮隐藏

2 个答案: