Html中的折叠字段

Question

如何选中复选框可以折叠的Html中的字段。 我在Django编程。

问候， 金塔尔

Answer 1

你需要一个JavaScript库，如jQuery - 那么它很容易指定动画动作事件。阅读jQuery文档学习，或剪切和粘贴解决方案，其他人将毫无疑问地放在这里很快...

请注意，这不是一个Django特定的问题，它的JavaScript和HTML。

Answer 2

下面的jQuery代码使用'+'图像，然后是标题。例如+前十名

我用它来制作手风琴。

$(document).ready(function() { 
    $("div#hideable div").hide(); 
    // add css to show +/- symbols and labels - no point showing them if they don't work! 
    $("div#hideable h3 a img").css("display", "inline"); 
    $("div#hideable label").css("display", "inline"); 

    $("div#hideable h3 a").toggle(function() { 
     $($(this).attr("href")).show(); 
     imgName = $(this).find('img').attr("src").split("-", 1); //grab the image name so that we get the right one 
     $(this).find('img').attr("src", imgName + "-minus.gif"); //change img, alt and label to match action 
     $(this).find('img').attr("alt", "-"); 
     var sectionId = $(this).attr("href").substring($(this).attr("href").length - 1); 
     if (sectionId == 0) { 
      sectionId = 10; 
     } 
     labelName = "#lblSection" + sectionId; 
     $(labelName).text("click '-' to collapse"); 
    }, function() { 
     $($(this).attr("href")).hide(); 
     $(this).find('img').attr("src", imgName + "-plus.gif"); 
     $(this).find('img').attr("alt", "+"); 
     var sectionId = $(this).attr("href").substring($(this).attr("href").length - 1); 
     if (sectionId == 0) { 
      sectionId = 10; 
     } 
     labelName = "#lblSection" + sectionId; 
     $(labelName).text("click '+' to expand"); 
    }); 
}); 

Answer 3

德勤Spacedman ...

我建议jQuery的，以及（http://jquery.com/），因为它是非常好用。

下面是一些在心跳中跳动的代码。

$("#my_checkbox").change(function() { 
    if ($(this).is(':checked')) { 
     $("#my_html").hide(); // hide element with id="my_html" 
    } else { 
     $("#my_html").show(); // show... 
    } 
});