Question

我的要求是在弹出窗口内动态创建多个bootstrap手风琴取决于用户输入的数量。在点击第一个手风琴时它会打开但是点击第二个手风琴时第一个没有关闭。请帮我解决这个问题。< / p>

Html代码

    <div class="modal-body col-ms-12 col-sm-12 col-xs-12 ">
    <div class="col-ms-12 col-sm-12 col-xs-12">
    <h4 class="col-ms-3 col-sm-3 col-xs-3 nopadding">Number of workLoad</h4> 
    <input type="text" id="myText" value="1" onkeypress="return isNumber(event)" class=" col-ms-6 col-sm-6 col-xs-6"> 
    <button class="workLoadNumber col-ms-3 col-sm-3 col-xs-3">Submit</button><br>
    </div>

    <div class="container col-ms-12 col-sm-12 col-xs-12">
     <div class="panel-group col-ms-12 col-sm-12 col-xs-12" id="accordion">
        <p id="demo" class="col-ms-12 col-sm-12 col-xs-12"></p>
    </div>
    </div>
    </div>

Js代码

    for(var i =1 ; i<= userEnteredValue ; i++){  

    selectedNodeContent  += '<div class="panel panel-default">
    <div class="panel-heading"><h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#'+accordionBaseOpen+i+'">Collapsible Group 2</a>
    </h4></div><div id="'+accordionBaseOpen+i+'" class="panel-collapse collapse">
    <div class="panel-body">Hi How are you </div>
</div>
</div>'; 
    }
    document.getElementById("demo").innerHTML = selectedNodeContent;

Answer 1

 Remove the p tag and place the accordions inside parent div. 


<div class="modal-body col-ms-12 col-sm-12 col-xs-12 ">
        <div class="col-ms-12 col-sm-12 col-xs-12">
        <h4 class="col-ms-3 col-sm-3 col-xs-3 nopadding">Number of workLoad</h4> 
        <input type="text" id="myText" value="1" onkeypress="return isNumber(event)" class=" col-ms-6 col-sm-6 col-xs-6"> 
        <button class="workLoadNumber col-ms-3 col-sm-3 col-xs-3">Submit</button><br>
        </div>

        <div class="container col-ms-12 col-sm-12 col-xs-12">
         <div class="panel-group col-ms-12 col-sm-12 col-xs-12" id="accordion">

        </div>
        </div>
        </div>

JS:

 for(var i =1 ; i<= userEnteredValue ; i++){  

    selectedNodeContent  += '<div class="panel panel-default">
    <div class="panel-heading"><h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#'+accordionBaseOpen+i+'">Collapsible Group 2</a>
    </h4></div><div id="'+accordionBaseOpen+i+'" class="panel-collapse collapse">
    <div class="panel-body">Hi How are you </div>
</div>
</div>'; 
    }
    **document.getElementById("accordion").innerHTML = selectedNodeContent;**

从动态创建的bootstrap手风琴列表中点击一个它打开但其他人没有关闭？

1 个答案: