可以使用 jquery 来显示/隐藏 ajaxcontroltoolkit 手风琴吗？答案

【问题标题】：possible to use jquery to show/hide ajaxcontroltoolkit accordion?可以使用 jquery 来显示/隐藏 ajaxcontroltoolkit 手风琴吗？
【发布时间】：2012-11-22 08:11:18
【问题描述】：

我有一个 AjaxControlToolkit，我想根据下拉值显示或隐藏它。

我可以通过更改“ShowLinkButton”控件的文本来隐藏它（在我想隐藏手风琴的地方使用空白“”），但我想隐藏手风琴本身。（即使文本为空白，手风琴也可以点击。）

所以，这是我的 jquery 代码：

$(function() {
    if ($('#<%= DDStatusList.ClientID %>').change(function() {
        var statusval2 = $("#SampleContent_Tabs_TabPanel3_DDStatusList").val();
        if (statusval2 == 4) {
            $('#<%= ShowLinkButton.ClientID%>').html("Show Accordion");
        }
        else {
            $('#<%= ShowLinkButton.ClientID%>').html("");
        }
    }));
});

我尝试将 Accordion 和 LinkButton 的可见属性都设置为 false，然后在 jquery 函数中满足条件时将其设置为 true，但两种策略似乎都不起作用。

想法？

【问题讨论】：

标签： jquery asp.net ajaxcontroltoolkit accordion

【解决方案1】：

你试过了吗：

$(function() {
    if ($('#<%= DDStatusList.ClientID %>').change(function() {
        var statusval2 = $("#SampleContent_Tabs_TabPanel3_DDStatusList").val();
        if (statusval2 == 4) {
            $('#<%= ShowLinkButton.ClientID%>').html("Show Accordion");
            //$find('<%= MyAccordion.ClientID%>').show();
            showAccordionPane('<%= MyAccordion.ClientID%>', 1);
        }
        else {
            $('#<%= ShowLinkButton.ClientID%>').html("");
            //$find('<%= MyAccordion.ClientID%>').hide();
            hideAccordionPane('<%= MyAccordion.ClientID%>', 1);
        }
    }));
});

// hides pane 1
function hideAccordionPane(AccordionCtrl, paneno) {
    $find(AccordionCtrl).get_Pane(paneno).header.style.display = "none";
    $find(AccordionCtrl).get_Pane(paneno).content.style.display = "none";
}

// shows pane 1
function showAccordionPane(AccordionCtrl, paneno) {
    $find(AccordionCtrl).get_Pane(paneno).header.style.display = "block";
    $find(AccordionCtrl).get_Pane(paneno).content.style.display = "block";
}

【讨论】：

刚刚做了，但我发现错误...（更改了“MyAccordion”以匹配实际控制）

【解决方案2】：

document.getElementById('<%= MyAccordion.ClientID%>').AccordionBehavior.set_SelectedIndex(2)// expand panel nr.3
// index starts from 0 (number of panel ) if close  set it -1

或者jquery

$('#<%= MyAccordion.ClientID %>').get(0).AccordionBehavior.set_SelectedIndex(2)

 $('#<%= MyAccordion.ClientID %>').get(0).set_TransitionDuration(1000) //set timeout for collapse in ms.

用内容隐藏面板

   document.getElementById('ctl00_SampleContent_MyAccordion').AccordionBehavior.get_Pane(0).content.style.display='none';
    document.getElementById('ctl00_SampleContent_MyAccordion').AccordionBehavior.get_Pane(0).header.style.display='none';

Javscript 在这里 http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx 在 chrome 的调试控制台中进行了测试

【讨论】：

【解决方案3】：

谢谢大家。

我最终这样做了：

if ($('#<%= DDStatusList.ClientID %>').change(function () {
                                        var statusval2 = $("#MainContent_Tabs_TabPanel3_DDStatusList").val();
                                        var statusvalcurrent = $("#MainContent_LabelStatusNumber").text();
                                        if (statusval2 == 4 && statusvalcurrent == 4.3) {

                                            $('#<%= status43panel.ClientID%>').show();

                                            //alert("show");
                                        }
                                        else {

                                            $('#<%= status43panel.ClientID%>').hide();

                                            //alert("hide");
                                        }

【讨论】：