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

Question

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

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

所以，这是我的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 和 LinkBut​​ton 的可见属性都设置为 false，然后在 jquery 函数中满足条件时将其设置为 true，但是这两种策略似乎都不起作用。

想法？

Answer 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";
}​

Answer 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 的调试控制台中进行了测试

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