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... 
    } 
});