大二的我有幸通過實習崗位加入一個公司的項目，大致做的是一箇中小學生網上在線學習的網站，後端運用php，前端主要藉助bootstrap4快速開發。
最近在做頁面整體框架的左垂直導航欄時，有一個需求讓現在的我着實有點頭疼，需求內容大致如下：
- 首先，滿足每個垂直導航塊的一級菜單內部包含二級菜單。
- 其次，每次打開一個一級菜單，其餘的一級菜單自動關閉。
- 接着，一級菜單的第一個默認打開，並且其中二級菜單的第一個默認選中。
- 最後，所有的二級菜單，必須有且僅有一個選中，其他未選中。意思是不能每個二級菜單相互獨立，要相互關聯。
需求分析
上面明確要求儘量用bootstrap4已經有的插件，畢竟用框架更加的穩定，測試上線時也不會出現特別奇怪的bug。
其實看到這個需求，再結合自己的bootstrap4知識，我第一個想到的是，運用摺疊和列表組來完成。這兩個玩意結合可以很好的滿足前三個需求，唯一難辦的是最後一個二級菜單相關聯，我發現bootstrap4的列表組list-group下面的li必須作爲直接子元素，否則列表組就崩了。
所以，運用collapse摺疊和list-group列表組的嵌套顯然是不合適的，你很難將不同的list-group相互關聯，我查了不少資料，意識到如果純的bootstrap4完成需求可能就要修改源碼，我對這個不是很在行，畢竟前端自學的才半年左右，直接修改源碼可能會導致其他插件出毛病，對於未知的東西，我不是很敢修改。
這是默認樣式，滿足需求三
它滿足需求一和二
可是，它的每一個菜單的二級子菜單都是獨立的，不關聯的，不符合需求四。
我打算加一段js代碼來覆蓋bootstrap4的選擇效果。
我刪除了每一個二級菜單，也就是列表項的data-toggle="list"屬性，加入了name=‘link’屬性，js代碼會根據這一屬性，將所有有這一屬性的列表項相關聯，做到點擊效果唯一。
下面是模擬的完整代碼，項目代碼我不能發出來
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function(){
function clickNav(event) {
var target = event.currentTarget;
//上次選擇的a的樣式
if($("a[name='link']")){
var arrLink = $("a[name='link']");
for(i = 0; i < arrLink.length; i++) {
var link = arrLink[i];
if(link.classList.contains('active')) {
link.classList.remove('active');
}
}
}
target.classList.add('active');
}
if($("a[name='link']")){
var arrLink = $("a[name='link']");
console.log(arrLink.length);
for(i = 0; i < arrLink.length; i++){
var link = arrLink[i];
//默認鏈接第一個有active
if(i===0){
if(!link.classList.contains('active')){
link.classList.add('active');
}
}
else{
link.classList.remove('active');
}
link.onclick = clickNav;
}
}
});
</script>
</head>
<body>
<div class="container " style='width:300px;'>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
選項一
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active"name='link'>First item</a>
<a href="#" class="list-group-item list-group-item-action"name='link'>Second item</a>
<a href="#" class="list-group-item list-group-item-action"name='link'>Third item</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
選項二
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"name='link'>First item</a>
<a href="#" class="list-group-item list-group-item-action"name='link'>Second item</a>
<a href="#" class="list-group-item list-group-item-action"name='link'>Third item</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
選項三
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"data-toggle="list"name='link'>First item</a>
<a href="#" class="list-group-item list-group-item-action"data-toggle="list"name='link'>Second item</a>
<a href="#" class="list-group-item list-group-item-action"data-toggle="list"name='link'>Third item</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最後我把這個想法實現後，忽然需求又改了，不要求所有的二級子菜單相關聯了，我最頭疼的問題麼得了，有點傷感哦，但還是趕緊來csdn把自己的想法保存下來。如果讀者有更好的想法希望不吝賜教，畢竟我自學前端的時間不長，能力和認識都有限，作爲一個江蘇普通二本計科院的大二狗，很珍惜這次校內實習的機會，希望藉助項目來提升自己，爲將來發展前端打地基。
