在Toggle上单击CollapsiblePanel内的按钮

时间:2015-12-03 10:05:03

标签: c# jquery asp.net

我正在使用以下的CollapsiblePanel jQuery插件: http://www.darreningram.net/jquery-collapsible-panel-plugin-2/

在我的网页上,我有一个Repeater,其中每个Item都包含一个CollapsiblePanel和一个Button。

<Repeater>
   <ItemTemplate>
      <asp:Panel runat="server" class="collapsibleContainer">//this panel becomes collapsible
         <asp:Button runat="server" OnClick="Button1_Click" ID="Button1"/>
         ...other stuff...
      </Panel>
   </ItemTemplate>
</Repeater>

我希望触发Button1上的Click事件,并在切换CollapsiblePanel时在代码后面运行事件处理程序。

所以我转到CollapsiblePanel.js中的CollapsibleContainerTitleOnClick函数并添加以下内容:

$(this).parent().children("#Button1").trigger('click');

$(this).children("#Button1").trigger('click');

但没有任何反应。事件不会发生。

我尝试在Button1周围添加UpdatePanel,但仍然没有。

我怎样才能让它发挥作用?感谢。

编辑:这是我正在改变的jQuery代码:

(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
        // Call the ConfigureCollapsiblePanel function for the selected element
        return $(this).each(ConfigureCollapsiblePanel);
    }
  });
})(jQuery);

function ConfigureCollapsiblePanel() {
    $(this).addClass("ui-widget");

    // Check if there are any child elements, if not then wrap the inner text within a new div.
    if ($(this).children().length == 0) {
    $(this).wrapInner("<div></div>");
    }    

    // Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class="collapsibleContainerContent ui-widget-content"></div>");

    // Create a new div as the first item within the container.  Put the title of the panel in here.
    $("<div class="collapsibleContainerTitle ui-widget-header"><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));

    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
    $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
}

function CollapsibleContainerTitleOnClick() {
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
    $(".collapsibleContainerContent", $(this).parent()).slideToggle();
}

1 个答案:

答案 0 :(得分:0)

如果您不打算单击面板中的按钮

(static)

OR

如果您的目的是调用一个函数onClick of Collapsible面板,然后在CollapsiblePanel.js中的“CollapsibleContainerTitleOnClick”内调用该函数调用