我正在使用以下代码来显示垂直导航。它可以折叠和打开,我喜欢在用户单击子菜单时更改此设置,父菜单保持打开状态,子菜单突出显示。因此用户知道他显示的是哪个页面。我正在使用 Meteor JS 和 bootstrap 3,我用谷歌搜索了一下,我想我必须写一些 javaScript。但我在 javascript 方面的经验很少。
<template name="sideMenu">
<div class="content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-home"></span>
Home
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
Articles
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
News
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
Report
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
About us
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td>
<a href="/mission"><span class="glyphicon glyphicon-pencil text-primary"></span>
Articles
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
News
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
Report
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Company
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td>
<a href="/mission"><span class="glyphicon glyphicon-pencil text-primary"></span>
Articles
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
News
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span class="glyphicon glyphicon-pencil text-primary"></span>
Report
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
最佳答案
尝试
$('.panel-body .table td').on('click', function() {
$('.panel-body .table td').css('background', 'none');
$(this).css('background', 'black');
});
关于javascript - 如何突出显示单击的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24900380/