Question

我正在尝试使用JQuery，并且在单击另一个元素时尝试将一个元素添加到slideDown / slideUp，从所单击元素的数据属性中获取目标元素的id。

检查器中的DOM似乎有活动，但在视觉上没有任何变化。我的代码：

HTML：

<button data-target="#box">Click me!</button>
<div id="box"></div>

CSS：

.box {
    width: 100px;
    height: 100px;
    background: red;
    display: none;
}

JQuery：

$('button').click(function() {
    box = $($(this).data('target'));
    if (box.hasClass('open')) {
        box.removeClass('open');
        box.slideUp(400);
    } else {
        box.addClass('open');
        box.slideDown(400);
    }
});

Answer 1

在你的CSS中，你需要编写#box而不是.box，因为你使用的是id，而不是类。

Answer 2

它在我这里工作：

jsfiddle

我将html更改为

<button data-target="#box">Click me!</button>
<div id="box">
    test<br>
    test<br>
    test<br>
    test<br>
    test<br>
    test<br>
</div>

Answer 3

将您的css .box更新为#box

查看演示http://jsfiddle.net/yeyene/muqz7/2/

$('button').click(function() {
    box = $($(this).data('target'));
    if (box.hasClass('open')) {
        box.removeClass('open');
        box.slideUp(400);
    } else {
        box.addClass('open');
        box.slideDown(400);
    }
});

从data属性获取id时，JQuery slideUp不起作用

3 个答案: