在Html中折叠字段

h43kikqp  于 2022-11-27  发布在  其他
关注(0)|答案(3)|浏览(148)

如何在Html中创建字段,如果选中复选框,这些字段可能会折叠。我正在用Django编程。
问候,金塔雷

pgky5nke

pgky5nke1#

说得好太空人。
我也推荐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...
   }
});
xzlaal3s

xzlaal3s2#

你需要一个JavaScript库,比如jQuery -那么很容易为事件分配动画动作。阅读jQuery文档来学习,或者剪切和粘贴其他人无疑会很快放在这里的解决方案...
注意这不是Django特有的问题,是javascript和html的问题。

2jcobegt

2jcobegt3#

下面的jQuery代码使用一个'+'的图像,然后是一个标题。例如+ Top Ten
我用它做了一个 accordion 。

$(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");
    });
});

相关问题