jQuery在选择的类别上divs slideDown

时间:2014-01-10 07:03:12

标签: javascript jquery html slide categories

我在我的html中隐藏了div标签,我想在用户选择某个类别时显示它们,但我有更多隐藏的div,因为它是一个大网站。我应该在用户选择某个类别时显示它们。

我的问题是我是jQuery的新手,我真的不知道这是不是正确的方法,但我知道我在这个小提琴中这样做有问题:

Here is a fiddle to check

当我第一次选择第一个类别但是当我选择其他类别并再次回到第一个问题时,没有问题。我不明白问题出在哪里。

或者我应该在更改功能的一个类别中使用所有slideDown吗?

如果有人可以在这种情况下帮助我,并在这种情况下给我一个非常正确的方法来使用slideDown。

感谢。

1 个答案:

答案 0 :(得分:1)

我会这样做

$(document).ready(function () {

    $('#dropdown').on('change', function () {
         $('.common-class-for-all-hidden-divs').hide();
        var selection = $(this).val();

           $('#category_show_'+selection).show('slow');

    });
});

其中一个隐藏的div示例

<div id="category_show_3" class="common-class-for-all-hidden-divs" >
        <select name="category_show_3">
            <option value="">category_show_3</option>
            <option value="1">category_show_3</option>
            <option value="2">category_show_3</option>
            <option value="3">category_show_3</option>
            <option value="4">category_show_3</option>
            <option value="5">category_show_3</option>
        </select>
    </div>

css part -

.common-class-for-all-hidden-divs{
  display:none;
}