<!-- /.navbar-top-links -->
<div class='navbar-default sidebar' role='navigation'>
<div class='sidebar-nav navbar-collapse'>
<ul class='nav' id='side-menu'>
<li class='sidebar-search'>
<div class='input-group custom-search-form'>
<input type='text' class='form-control' placeholder='Search...'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>
<i class='fa fa-search'></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href='index.php'><i class='fa fa-dashboard fa-fw'></i> Home</a>
</li>
<li class=''>
<a href='#'><i class='fa fa-bar-chart-o fa-fw'></i> Pages<span class='fa arrow'></span></a>
<ul class='nav nav-second-level collapse' aria-expanded='false' style='height: 0px;'>
<li><a href="/seattle.php">Seattle</a></li>
<li><a href="/new-york.php">New York</a></li>
<li><a href="/london.php">London</a></li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
我正在尝试使用此jQuery $("").click(function(e)选择西雅图或伦敦等下拉链接，但我不能。
请帮助
答案 0 :(得分：0)
定位第二级导航：
$('.nav-second-level li').on('click', 'a', function(){
//do your thing here
var text = $(this).text();
alert(text );
});
$('.nav-second-level li').on('click', 'a', function() {
//do your thing here
var text = $(this).text();
alert(text);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='navbar-default sidebar' role='navigation'>
<div class='sidebar-nav navbar-collapse'>
<ul class='nav' id='side-menu'>
<li class='sidebar-search'>
<div class='input-group custom-search-form'>
<input type='text' class='form-control' placeholder='Search...'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>
<i class='fa fa-search'></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href='index.php'><i class='fa fa-dashboard fa-fw'></i> Home</a>
</li>
<li class=''>
<a href='#'><i class='fa fa-bar-chart-o fa-fw'></i> Pages<span class='fa arrow'></span></a>
<ul class='nav nav-second-level collapse' aria-expanded='false' style='height: 0px;'>
<li><a href="#">Seattle</a>
</li>
<li><a href="#">New York</a>
</li>
<li><a href="#">London</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
答案 1 :(得分：0)
你可以简单地给ul一个id并抓住它：
<ul class='nav nav-second-level collapse' id="nested_list" aria-expanded='false' style='height: 0px;'>
<li><a href="/seattle.php">Seattle</a></li>
<li><a href="/new-york.php">New York</a></li>
<li><a href="/london.php">London</a></li>
</ul>
$("#nested_list li a").click(function(e){
});
或者通过树简单的CSS：
$("#side-menu li ul li a").click(function(e){
});
答案 2 :(得分：0)
您可以通过添加和删除活动类来显示元素
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- /.navbar-top-links -->
<nav>
<div class='navbar-default sidebar' role='navigation'>
<div class='sidebar-nav navbar-collapse'>
<ul class='nav' id='side-menu'>
<li class='sidebar-search'>
<div class='input-group custom-search-form'>
<input type='text' class='form-control' placeholder='Search...'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>
<i class='fa fa-search'></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href='#'><i class='active fa fa-dashboard fa-fw'></i> Home</a>
</li>
<li class=''>
<a href='#'><i class='fa fa-bar-chart-o fa-fw'></i> Pages<span class='fa arrow'></span></a>
<ul class='nav nav-second-level collapse' aria-expanded='false' style='height: 0px;'>
<li><a href="/seattle.php">Seattle</a></li>
<li><a href="/new-york.php">New York</a></li>
<li><a href="/london.php">London</a></li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
答案 3 :(得分：0)
由于这些是锚标记<a>，当你点击其中一个时，jQuery中的任何一个都将被忽略，你将被重定向到'href'中的链接。
如果您想要其他事情发生，那么您可以使用preventDefault（）来防止默认行为
$("a").click(function(e){
e.preventDefault();
var link = $(this).attr('href');
//do something
document.location.href = link;
});
答案 4 :(得分：0)
使用https://api.jquery.com/attribute-equals-selector/
执行此操作
$("a[href='/seattle.php']").on('click',function (E) { $(this).text('Changed!');E.preventDefault();return false;});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='navbar-default sidebar' role='navigation'>
<div class='sidebar-nav navbar-collapse'>
<ul class='nav' id='side-menu'>
<li class='sidebar-search'>
<div class='input-group custom-search-form'>
<input type='text' class='form-control' placeholder='Search...'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>
<i class='fa fa-search'></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href='index.php'><i class='fa fa-dashboard fa-fw'></i> Home</a>
</li>
<li class=''>
<a href='#'><i class='fa fa-bar-chart-o fa-fw'></i> Pages<span class='fa arrow'></span></a>
<ul class='nav nav-second-level collapse' aria-expanded='false' style='height: 0px;'>
<li><a href="/seattle.php">Seattle</a></li>
<li><a href="/new-york.php">New York</a></li>
<li><a href="/london.php">London</a></li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>