Verwenden von Bootstrap-Akkordeon-Panels

Question

Sie haben mit der jQuery-Syntax zu kämpfen. Ich versuche, einen JS-Code einzurichten, um ein Akkordeon-Panel zu erweitern/zu reduzieren (http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp). Ich kann es mit x $ erweitern und reduzieren ("# {id: collapsePanel2}"). Collapse ("toggle"); Das funktioniert gut, aber bricht die anderen Panels nicht zusammen. Sie können dies unter https://www.netexperts.com/xpages1.nsf/collapse.xsp sehen. Es gibt einen "Eltern" -Parameter, der besagt, dass der Selektor verwendet wird. Ich habe versucht "#view: _id1: accordion" (die generierte ID des Elternteils), ich habe versucht Eltern = "# view: _id1: Akkordeon" und ein paar andere Kombinationen. Die Dokumente unter http://www.w3schools.com/Bootstrap/bootstrap_ref_js_collapse.asp unter den Collapse-Optionen sagen, dass das Parent ein Parameter ist, der den Parent-Selektor annimmt, aber ich kann das anscheinend nicht weitergeben, ohne einen JS-Fehler zu verursachen.

<?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

Sie benötigen die jquery so etwas wie dieses

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

Arbeitsbeispiel http://bootsbin.com/bin/view/46/