Как у меня есть несколько кнопок закрытия с CollapsiblePanelExtender?

Question

У меня есть элемент управления asp.net ajax CollapsiblePanelExtender на моей странице. Как устроен этот элемент управления, вы можете указать один элемент управления, чтобы открыть панель, и другой элемент управления, чтобы закрыть ее:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
  TargetControlID="panelStuff"
  ExpandControlID="butToggle" CollapseControlID="butToggle" Collapsed="True"
  SuppressPostBack="true" />

Если ExpandControlID и CollapseControlID идентичны, как в этом примере, тогда элемент управления переключает панель в открытое и закрытое состояние.

Но то, что я хотел бы, это еще один элемент управления (в пределах panelStuff), который позволяет пользователю закрыть эту панель. В идеале хотелось бы уточнить:

CollapseControlID="butToggle,butClose"

Есть идеи, как это сделать?

Answer 1

Один из способов достижения этого:

Назначьте идентификатор поведения для CollapsiblePanelExtender:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
  BehaviorID="cpeForBehavior"
  TargetControlID="panelStuff"
  ExpandControlID="butToggle" CollapseControlID="butToggle" Collapsed="True"
  SuppressPostBack="true" />

Создание функции JavaScript для выполнения желаемого поведения:

function closeCpe() {
    $find("cpeForBehavior")._doClose();
}

Выполнить функцию в обработчике событий:

<input type="button" id="MyOtherButton" onclick="closeCpe();" />

Answer 2

То же, что и ответ выше, но я искал переключатель. _doToggle () не будет работать, поэтому просто для справки:

 function closeCpe() {
            var cpe = $find("cpeForBehavior");

            if (cpe.get_Collapsed()) {
                cpe._doOpen();
            }
            else {
                cpe._doClose();
            }
        }