Использование ботстрапных аккордеонных панелей

Question

Борьба с синтаксисом jQuery. Я пытаюсь установить некоторый JS-код, чтобы развернуть/свернуть панель аккордеона (http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp). Я могу заставить его развернуть и свернуть с помощью x $ ("# {id: collapsePanel2}"). Collapse ("toggle"); Это прекрасно работает, но не разрушает другие панели. Вы можете увидеть это на https://www.netexperts.com/xpages1.nsf/collapse.xsp. Существует параметр «parent», который говорит, что он принимает селектор. Я пробовал «#view: _id1: accordion» (сгенерированный идентификатор родительской панели), я попробовал parent = "# view: _id1: accordion" и несколько других комбинаций. Документы в http://www.w3schools.com/Bootstrap/bootstrap_ref_js_collapse.asp под параметрами .collapse говорят, что родительский параметр - это параметр, который принимает родительский селектор, но я не могу передать это, не бросая ошибку JS.

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view 
xmlns:xp="http://www.ibm.com/xsp/core" 
xmlns:xe="http://www.ibm.com/xsp/coreex"> 
<xe:navbar 
    id="navbar1" 
    headingText="Collapse Panel" 
    pageWidth="full"> 
</xe:navbar> 
<xp:br></xp:br> 
<xp:br></xp:br> 

<xp:panel 
    styleClass="panel-group" 
    id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <xp:link 
        escape="true" 
        id="link1"> 
        Collapsible panel 

        <xp:eventHandler 
         event="onclick" 
         submit="false"> 
         <xp:this.script><![CDATA[ 
//function is called using x$("#{id:inputText1}", " parameters"). 
x$("#{id:collapsePanel}").collapse("toggle"); 
function x$(idTag, param){ //Updated 18 Feb 2012 
idTag=idTag.replace(/:/gi, "\\:")+(param ? param : ""); 
return($("#"+idTag)); 
} 

]]></xp:this.script> 
        </xp:eventHandler> 
       </xp:link> 
      </h4> 
     </div> 
     <xp:panel 
      id="collapsePanel" 
      styleClass="panel-collapse collapse"> 
      <div class="panel-body">Panel Body</div> 
      <div class="panel-footer">Panel Footer</div> 
     </xp:panel> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <xp:link 
        escape="true" 
        id="link2"> 
        Collapsible panel 

        <xp:eventHandler 
         event="onclick" 
         submit="false"> 
         <xp:this.script><![CDATA[ 
//function is called using x$("#{id:inputText1}", " parameters"). 
x$("#{id:collapsePanel2}").collapse("toggle"); 
function x$(idTag, param){ //Updated 18 Feb 2012 
    idTag=idTag.replace(/:/gi, "\\:")+(param ? param : ""); 
    return($("#"+idTag)); 
} 

]]></xp:this.script> 
        </xp:eventHandler> 
       </xp:link> 
      </h4> 
     </div> 
     <xp:panel 
      id="collapsePanel2" 
      styleClass="panel-collapse collapse"> 
      <div class="panel-body">Panel Body</div> 
      <div class="panel-footer">Panel Footer</div> 
     </xp:panel> 
    </div> 
</xp:panel> 
</xp:view> 

Answer 1

Вам необходимо обновить Jquery что-то вроде этого

$("#link").on("click", function(event) { 
    event.preventDefault(); 
    $('#accordion .panel-collapse').collapse('hide'); 
    $('#collapseTwo').collapse('toggle'); 
}); 

Рабочий пример http://bootsbin.com/bin/view/46/