Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
434 views
in Technique[技术] by (71.8m points)

javascript - Collapse other panel when one is clicked within a foreach loop

I am having issues with a list of menus clicking and hiding other panels when one is clicked and active.

    @{int i = 0;}
    @foreach (var levelOne in Model.MenuLevelOne)
    {
     <div class="panel-group" id="accordion_@i">
      <div class="panel panel-default" id="panel_@i">
       <div class="panel-heading">
        <h4 class="panel-title">
     <a onclick="leveltwo('@levelOne.MenuLevel')" data-toggle="collapse" data-target="#collapseOne_@i" href="#collapseOne_@i">@levelOne.MenuLevel</a>
        </h4>
       </div>
      <div id="collapseOne_@i" class="panel-collapse collapse in">
     <div class="panel-body">                                                                               
      <ul class="" id="[email protected]"></ul><ul class="filter-categories__list"></ul>
     </div>
        </div>
        </div>
    </div>
     i++;
     }

This will bring a list of Menus so like this with its sub menus :

Fruit

   Apple

   Pear

   Grape

Veg

   Carrot

   Cucumber

   Beetroot

Other

   Cake

   Chocalte

All these are collapsed on page load which is fine and working,

Shows as :

 Fruit

 Veg

 Other

however, when I open one and then open another one they should close.

So for example if I open Fruit, and then I open Veg. Fruit should close and Veg should open.

 Fruit

       Apple

       Pear

       Grape

 Veg

 Other

This should now open like this like but it is not working.

 Fruit


 Veg

       Carrot

       Cucumber

       Beetroot

 Other

Both of them stay open. How can I keep one open then close the rest?

Can someone tell me where I am wrong in the code?

Thanks

New error:

New error when i add the scripts


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need to add a function to close opened tabs each time one open:

$(document).ready(function () { 
        $('.collapse').on('show.bs.collapse', function () { //Triggered everytime the collapse is show
            $('.collapse.in').each(function () { //select current collapsed (some versions could be .show instead of .in
                $(this).collapse('hide'); //hide previously collapsed
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion_0">
    <div class="panel panel-default" id="panel_0">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_0" href="#collapseOne_0">1</a>
            </h4>
        </div>
        <div id="collapseOne_0" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-1">
                    <li>Nível 1 - Item 1</li>
                    <li>Nível 1 - Item 2</li>
                    <li>Nível 1 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 1 - Filtro 1</li>
                    <li>Nível 1 - Filtro 2</li>
                    <li>Nível 1 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion_1">
    <div class="panel panel-default" id="panel_1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_1" href="#collapseOne_1">2</a>
            </h4>
        </div>
        <div id="collapseOne_1" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-2">
                    <li>Nível 2 - Item 1</li>
                    <li>Nível 2 - Item 2</li>
                    <li>Nível 2 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 2 - Filtro 1</li>
                    <li>Nível 2 - Filtro 2</li>
                    <li>Nível 2 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion_2">
    <div class="panel panel-default" id="panel_2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_2" href="#collapseOne_2">3</a>
            </h4>
        </div>
        <div id="collapseOne_2" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-3">
                    <li>Nível 3 - Item 1</li>
                    <li>Nível 3 - Item 2</li>
                    <li>Nível 3 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 3 - Filtro 1</li>
                    <li>Nível 3 - Filtro 2</li>
                    <li>Nível 3 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...