ASP.NET初學者問題：我如何實現這樣的東西是我的ASP.NET C＃網站？

Question

我想創建一個像本網站上的常見問題頁面

http://www.microsoft.com/windows/windows-7/faq.aspx

當您單擊該問題時，答案會擴展。 再次單擊它會折疊。

我的問題，答案存儲在數據庫中。 我用Google搜索並發現有這個JavaScript代碼來實現這一點，但也發現了可以使用Repeater Controls完成的事情。

怎么做？ 任何教程的鏈接都會很棒。

Answer 1

它被稱為手風琴。

http://jqueryui.com/demos/accordion/

jQuery可以做到這一點:)

轉發器和jQuery可以一起使用。 這取決於FAQ的結構。

Answer 2

你可以用jQuery做到這一點。 假設您有一個頁面名稱Faq.aspx 。 所以將此代碼放入.aspx頁面。

<head>
    <script src="js/jquery_div.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //hide the all of the element with class msg_body
            $(".msg_body").hide();
            //toggle the componenet with class msg_body
            $(".msg_head").click(function(){
                $(this).next(".msg_body").slideToggle(600);
            });
        });
    </script>

    <style type="text/css">
        .msg_head {
        padding: 5px 10px;
        cursor: pointer;
        position: relative;
        background-color:#F4F4F8;
        color:Blue;
        margin:1px;
    }
    .msg_body {
        padding: 5px 10px 15px;
        background-color:#F4F4F8;
    }
    </style>
</head>

在body標簽中，您必須放置此代碼。

<body>
    <p class="msg_head">your titel</p>

    <div class="msg_body">
        Your logic
    </div>
</body>

我真的希望這對你有用。

Answer 3

找到幾個鏈接給你。 希望這些可以幫到你 -

http://articles.sitepoint.com/article/asp-net-repeater-control

http://www.eggheadcafe.com/community/aspnet/2/10040295/repeater-control.aspx

Answer 4

您可能希望轉發器顯示問題和答案（具有visibility=hidden的div的答案）。 然后，您需要一些JavaScript代碼（可能值得查看jQuery庫以使其更容易）來掛鈎問題的click事件以在客戶端顯示答案。

使用轉發器是因為您有一個“重復”布局，這使得它更簡單一些。 您需要JavaScript代碼，因為您希望在客戶端發生視覺效果。

ASP.NET初學者問題：我如何實現這樣的東西是我的ASP.NET C＃網站？

問題描述

4 個解決方案

解決方案1
4 2010-09-06 08:15:48

解決方案2
4 已采納 2010-09-06 08:36:40

解決方案3
1 2010-09-06 08:15:10

解決方案4
1 2010-09-06 08:15:34

ASP.NET初學者問題：我如何實現這樣的東西是我的ASP.NET C＃網站？

問題描述

4 個解決方案

解決方案1 4 2010-09-06 08:15:48

解決方案2 4 已采納 2010-09-06 08:36:40

解決方案3 1 2010-09-06 08:15:10

解決方案4 1 2010-09-06 08:15:34

解決方案1
4 2010-09-06 08:15:48

解決方案2
4 已采納 2010-09-06 08:36:40

解決方案3
1 2010-09-06 08:15:10

解決方案4
1 2010-09-06 08:15:34