挣扎着 Bootstrap 来完成我的 show/hide 手风琴

Question

好吧，我今天开始使用 Bootstrap 并得到了一些帮助，开始让一个开关正常工作，但我需要其中 4 个开关正常工作。如您所见，如果您运行代码仅第一个 window 显示信息，我需要帮助的第二件事是让它工作，一次只能显示一个隐藏文本，我需要帮助的第三件事是让第一个隐藏文本在页面加载时可见。 * 这不是重复的 post 我得到的最后一个解决方案工作得很好，但不是很灵敏，而且很慢，决定尝试 Bootstrap，它看起来很有前途。

#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;}
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887;  font-style: normal;}
#leftpanel a {margin-left: 230px;}
#demo { color: #333; font-size: 14px;}



.collapse {}
.testver { }

.testver hr {


}

.fa-angle-up {
  display: none;
}

.testver i {

}

 .testver .fa {
   ;
 }

 .arrow[aria-expanded="true"] .fa-angle-up {
   display: inline-block;
 }

  .arrow[aria-expanded="true"] .fa-angle-down {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="leftpanel">
                <div class="testver">
                    <h1>First title</h1>


                    <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
                        <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
                        <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
                    </a>
                    <div id="demo" class="collapse">
                        First text
                    </div>
                    <hr>
                </div>
                <div class="testver">
                    <h2>Second title</h2>


                    <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
                        <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
                        <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
                    </a>
                    <div id="demo" class="collapse">
                        Second text
                    </div>
                    <hr>
                </div>
                <div class="testver">
                    <h2>Third title</h2>


                    <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
                        <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
                        <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
                    </a>
                    <div id="demo" class="collapse">
                        Third text
                    </div>
                    <hr>
                </div>
                <div class="testver">
                    <h2>Last title</h2>


                    <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo">
                        <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
                        <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
                    </a>
                    <div id="demo" class="collapse">
                        Last Text
                    </div>
                    <hr>
                </div>
            </div>

Answer 1

ID 必须是唯一的：例如，将#demo 更改为#demo1、#demo2、#demo3 和#demo4。

单击 div 后，需要隐藏所有剩余的 div：

var currTarget = $(this).closest('a').data('target').substr(1);
$('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');

为了打开第一个 div，需要在属性中添加折叠，加上 aria-expamded，如：

<div id="demo1" class="collapse in" aria-expanded="true">

片段：

$('.testver a i').on('click', function(e) {
  var currTarget = $(this).closest('a').data('target').substr(1);
  $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');
});

#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;}
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887;  font-style: normal;}
#leftpanel a {margin-left: 230px;}
#demo { color: #333; font-size: 14px;}



.collapse {}
.testver { }

.testver hr {


}

.fa-angle-up {
  display: none;
}

.testver i {

}

.testver .fa {
  ;
}

.arrow[aria-expanded="true"] .fa-angle-up {
  display: inline-block;
}

.arrow[aria-expanded="true"] .fa-angle-down {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="leftpanel">
    <div class="testver">
        <h1>First title</h1>


        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1" aria-expanded="true">
            <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
            <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
        </a>
        <div id="demo1" class="collapse in" aria-expanded="true">
            First text
        </div>
        <hr>
    </div>
    <div class="testver">
        <h2>Second title</h2>


        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2">
            <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
            <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
        </a>
        <div id="demo2" class="collapse">
            Second text
        </div>
        <hr>
    </div>
    <div class="testver">
        <h2>Third title</h2>


        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3">
            <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
            <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
        </a>
        <div id="demo3" class="collapse">
            Third text
        </div>
        <hr>
    </div>
    <div class="testver">
        <h2>Last title</h2>


        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4">
            <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
            <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
        </a>
        <div id="demo4" class="collapse">
            Last Text
        </div>
        <hr>
    </div>
</div>

挣扎着 Bootstrap 来完成我的 show/hide 手风琴

Straggling with Bootstrap to complete my show/hide accordion

html

javascript

css

toggle

twitter-bootstrap