Question

我正在创建一个带有向下钻取功能的仪表板站点，使用+/-图标隐藏/显示类别/子类别/子类别等。

我正在尝试动态驱动网站，这样无论类别/子类别的数量如何，脚本都会在不知道其确切ID的情况下运行。

我非常了解JQuery是危险的，我不幸在时间紧迫之下，希望专家能指出我正确的方向。

我有X个类别，每个都有X个子类别，每个都有X个SubSubCategories。类别和子类别需要能够打开/关闭以隐藏/显示其下的任何内容。

我希望能够使用以下代码动态处理任何Category / Subcatery隐藏/显示功能。填充仪表板的所有数据都将来自数据库，并且可以随时添加新的类别/子类别。

任何想法？

$(document).ready(function(){

$(".subsub").hide();
$(".subsubsub").hide();

$("#togglecat1").click(function(e)
{
    e.preventDefault();
    if($("#HScat1").attr("src") == "filter_hide.gif"){ 
        $("#HScat1").attr("src", "filter_reveal.gif"); }
    else{ $("#HScat1").attr("src", "filter_hide.gif"); }

    $(".cat1").toggle();
    $(".subsubsub").hide();
    $("#HScat1sub1").attr("src", "filter_hide.gif");
    $("#HScat1sub2").attr("src", "filter_hide.gif");
    $("#HScat1sub3").attr("src", "filter_hide.gif");

});

$("#togglecat1sub1").click(function(e)
{
    e.preventDefault();
    if($("#HScat1sub1").attr("src") == "filter_hide.gif"){ 
        $("#HScat1sub1").attr("src", "filter_reveal.gif"); }
    else{ $("#HScat1sub1").attr("src", "filter_hide.gif"); }

    $(".cat1sub1").toggle();

});
$("#togglecat1sub2").click(function(e)
{
    e.preventDefault();
    if($("#HScat1sub2").attr("src") == "filter_hide.gif"){ 
        $("#HScat1sub2").attr("src", "filter_reveal.gif"); }
    else{ $("#HScat1sub2").attr("src", "filter_hide.gif"); }

    $(".cat1sub2").toggle();

});
$("#togglecat1sub3").click(function(e)
{
    e.preventDefault();
    if($("#HScat1sub3").attr("src") == "filter_hide.gif"){ 
        $("#HScat1sub3").attr("src", "filter_reveal.gif"); }
    else{ $("#HScat1sub3").attr("src", "filter_hide.gif"); }

    $(".cat1sub3").toggle();

});


$("#togglecat2").click(function(e)
{
    e.preventDefault();
    if($("#HScat2").attr("src") == "filter_hide.gif"){ 
        $("#HScat2").attr("src", "filter_reveal.gif"); }
    else{ $("#HScat2").attr("src", "filter_hide.gif"); }

    $(".cat2").toggle();
});
});

JsFiddle

Answer 1

使用类，数据属性和jQuery选择器的组合，下面的代码可以自动动态创建子级（即使它们是实际的兄弟）和功能，以使它们能够手动扩展/收缩。

我把这个demo (jsFiddle)放在一起。这是js：

$(function () {
    var hide_src = "http://www.synchronizeddesigns.com/filter_hide.gif",
        reveal_src = "http://www.synchronizeddesigns.com/filter_reveal.gif";

    $('[class^="sub"]').hide();

    $('.category, .sub').each(function () {
        if ($(this).next('[class^="sub"]').length > 0) {
            $(this).addClass("expandable")
            .find('td:first')
                .prepend('<img class="pre plus" src="' + hide_src + '" />');
        }
    });

    $('.expandable').on('click', function (e) {
        e.stopImmediatePropagation();
        var $t = $("#" + e.delegateTarget.id),
            $i = $($t).find('img');

        var $s = $i.attr('src') == hide_src ? reveal_src : hide_src;
        $i.attr("src", $s);

        var $l = $t.parent()
            .find("[data-parent='" + e.delegateTarget.id + "']")
            .fadeToggle();

        var subs = $('#' + e.delegateTarget.id + 
                     '~ tr[data-parent^="' + e.delegateTarget.id + '_"]');

        if (subs.is(':visible')) {
            subs.fadeOut();
            $i = $($l).find('img');
            $s = $i.attr('src') == hide_src ? reveal_src : hide_src;
            $i.attr("src", $s);
        }
    });
});

JQuery循环隐藏/显示

1 个答案: