Question

我有一些div的显示和隐藏功能，需要添加更多div：

    $(document).ready(function() {
    $('[id^=des_]').hide();

    $('.notification, .description span').hover(function() {
        $(this).css('cursor', 'pointer');
    }, function() {
        $(this).css('cursor', 'auto');
    });

    $("#list_01").click(function() {
        $("#des_01").show();
        $("#des_02").hide();

    });

    $("#list_02").click(function() {
        $("#des_02 ").show();
        $('#des_01').hide();
    });

});

打开一个div时，如何隐藏所有其他div？有人可以帮忙吗？

工作示例为http://jsfiddle.net/tpWEk/

Answer 1

假设您的div ID的命名约定都遵循相同的模式，您可以执行类似的操作，因此您不需要为每个新元素重复代码：

$("div[id^='list_']").click(function() {
    $("div[id^='des_']").hide();
    $(this).next().show();
});

这是一个updated fiddle。它使用“attribute starts with”选择器将click事件处理程序绑定到div以“list_”开头的所有id元素。在该事件处理程序中，它隐藏div以“des_”开头的所有id个元素，获取下一个元素（在您的示例中为正确的div）并显示该元素。

Answer 2

$(".notification").click(function() {
        $(".description").hide();
        $(this).next().show();
    });

Answer 3

为了简化您的工作并防止重新发明轮子，您可以查看jQuery Accordion：http://jqueryui.com/demos/accordion/

演示处理您的代码：http://jsfiddle.net/ANCbg/2/

希望这对您的项目有用！

循环使用jQuery

3 个答案: