Question

一直在努力使用jQuery语法。我正在尝试设置一些JS代码来扩展/折叠手风琴面板（http://www.w3schools.com/Bootstrap/bootstrap_collapse.asp）。我可以使用x $（＆＃34;＃{id：collapsePanel2}＆＃34;）进行扩展和折叠。collapse（＆＃34; toggle＆＃34;）;这很好，但不会折叠其他面板。您可以在https://www.netexperts.com/xpages1.nsf/collapse.xsp看到此信息。有一个＆＃34;父母＆＃34;表示它需要选择器的参数。我试过＆＃34; #view：_id1：accordion＆＃34; （生成的父面板的id），我试过了父=＆＃34; #view：_id1：accordion＆＃34;以及其他一些组合。 .collapse选项下的http://www.w3schools.com/Bootstrap/bootstrap_ref_js_collapse.asp处的文档说父项是一个接受父选择器的参数，但我似乎无法在不抛出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/

使用Bootstrap手风琴面板

1 个答案: