I want to executes some jquery functions when clicking on an anchor tag and then proceeds to go wherever the hyperlink href was taking it.
我想在点击一个锚标签时执行一些jquery函数,然后继续前进到超链接href所采用的任何地方。
<li><a href="#3">3. Lorem</a></li>
When I click on this, I execute collapse to open the relative accordion for this anchor, then the hyperlink href event after collapse() with location.href = $(this).attr('href');:
当我点击这个时,我执行折叠打开这个锚的相对手风琴,然后使用location.href = $(this).attr('href');:collapse()后的超链接href事件
$('ul > li:nth-child(3)').click(function(e){
$('div[id*="content-"]:not(#content-3)').collapse('hide');
$('#content-3').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
But it does not work. When I click on a link opens the accordion but it doesn't scroll to the anchor.
但它不起作用。当我点击一个链接打开手风琴但它不会滚动到锚点。
Any help is appreciated!
任何帮助表示赞赏!
$('ul > li:nth-child(1)').click(function(e){
$('div[id*="content-"]:not(#content-1)').collapse('hide');
$('#content-1').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(2)').click(function(e){
$('div[id*="content-"]:not(#content-2)').collapse('hide');
$('#content-2').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(3)').click(function(e){
$('div[id*="content-"]:not(#content-3)').collapse('hide');
$('#content-3').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(4)').click(function(e){
$('div[id*="content-"]:not(#content-4)').collapse('hide');
$('#content-4').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(5)').click(function(e){
$('div[id*="content-"]:not(#content-5)').collapse('hide');
$('#content-5').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(6)').click(function(e){
$('div[id*="content-"]:not(#content-6)').collapse('hide');
$('#content-6').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(7)').click(function(e){
$('div[id*="content-"]:not(#content-7)').collapse('hide');
$('#content-7').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(8)').click(function(e){
$('div[id*="content-"]:not(#content-8)').collapse('hide');
$('#content-8').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(9)').click(function(e){
$('div[id*="content-"]:not(#content-9)').collapse('hide');
$('#content-9').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(10)').click(function(e){
$('div[id*="content-"]:not(#content-10)').collapse('hide');
$('#content-10').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(11)').click(function(e){
$('div[id*="content-"]:not(#content-11)').collapse('hide');
$('#content-11').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(12)').click(function(e){
$('div[id*="content-"]:not(#content-12)').collapse('hide');
$('#content-12').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});body {height:3000px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row-fluid">
<div class="col-md-9">
<div id="list">
<div class="list-group panel">
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="1" href="#content-1">1 LOREM</a>
<div class="collapse in" id="content-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="2" href="#content-2">2 LOREM</a>
<div class="collapse" id="content-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="3" href="#content-3">3 LOREM</a>
<div class="collapse" id="content-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="4" href="#content-4">4 LOREM</a>
<div class="collapse" id="content-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="5" href="#content-5">5 LOREM</a>
<div class="collapse" id="content-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="6" href="#content-6">6 LOREM</a>
<div class="collapse" id="content-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="7" href="#content-7">7 LOREM</a>
<div class="collapse" id="content-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="8" href="#content-8">8 LOREM</a>
<div class="collapse" id="content-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="9" href="#content-9">9 LOREM</a>
<div class="collapse" id="content-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="10" href="#content-10">10 LOREM</a>
<div class="collapse" id="content-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="11" href="#content-11">11 LOREM</a>
<div class="collapse" id="content-11">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="12" href="#content-12">12 LOREM</a>
<div class="collapse" id="content-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
</div>
</div>
</div>
<div class="col-md-3">
<ul>
<li><a href="#1">1. Lorem</a></li>
<li><a href="#2">2. Lorem</a></li>
<li><a href="#3">3. Lorem</a></li>
<li><a href="#4">4. Lorem</a></li>
<li><a href="#5">5. Lorem</a></li>
<li><a href="#6">6. Lorem</a></li>
<li><a href="#7">7. Lorem</a></li>
<li><a href="#8">8. Lorem</a></li>
<li><a href="#9">9. Lorem</a></li>
<li><a href="#10">10. Lorem</a></li>
<li><a href="#11">11. Lorem</a></li>
<li><a href="#12">12. Lorem</a></li>
</ul>
</div>
</div>5 个解决方案
#1
2
Something like this..
像这样的东西......
$('ul > li:nth-child(2)').click(function(e){
var _href = $(this).find('a').attr('href');
$('div[id*="content-"]:not(#content-2)').collapse('hide');
$('#content-2').collapse('show', function(e){
e.preventDefault();
location.href = _href;
});
});
#2
1
Answering from the comment.
回答评论。
You can minify all your JS code with just this working piece:
您只需使用此工作文件即可缩小所有JS代码:
$('ul > li').on('click', function(e){
var n = $(this).index() + 1;
$('#content-' + n).collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
#3
0
First, revise all your id which starts with number. Like id="12" to id="id-12".
首先,修改所有以数字开头的id。像id =“12”到id =“id-12”。
Then in your <li><a href="#12">12. Lorem</a></li>.
然后在
Change href as href="#id-12"
将href更改为href =“#id-12”
#4
0
You have a mess in your code.
你的代码很乱。
$('ul > li:nth-child(1)').click(function(e){
$('div[id*="content-"]:not(#content-1)').collapse('hide');
$('#content-1').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(1)') - this point to li, but you want action from a;
$('ul> li:nth-child(1)') - 这指向li,但你想要一个动作;
$('#content-1') - you search for element with id content-1, which is div, but you use $(this) (which still is div) expecting it has attribute href.
$('#content-1') - 你搜索id为content-1的元素,即div,但你使用$(this)(仍然是div)期望它有属性href。
Your href will be proceed by default, if you would click on anchor, but not on li
默认情况下,如果你点击锚点,你的href将会继续,但不会点击
#5
-1
try like this
试试这样
window.location.href = someUrl;
#1
2
Something like this..
像这样的东西......
$('ul > li:nth-child(2)').click(function(e){
var _href = $(this).find('a').attr('href');
$('div[id*="content-"]:not(#content-2)').collapse('hide');
$('#content-2').collapse('show', function(e){
e.preventDefault();
location.href = _href;
});
});
#2
1
Answering from the comment.
回答评论。
You can minify all your JS code with just this working piece:
您只需使用此工作文件即可缩小所有JS代码:
$('ul > li').on('click', function(e){
var n = $(this).index() + 1;
$('#content-' + n).collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
#3
0
First, revise all your id which starts with number. Like id="12" to id="id-12".
首先,修改所有以数字开头的id。像id =“12”到id =“id-12”。
Then in your <li><a href="#12">12. Lorem</a></li>.
然后在
Change href as href="#id-12"
将href更改为href =“#id-12”
#4
0
You have a mess in your code.
你的代码很乱。
$('ul > li:nth-child(1)').click(function(e){
$('div[id*="content-"]:not(#content-1)').collapse('hide');
$('#content-1').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(1)') - this point to li, but you want action from a;
$('ul> li:nth-child(1)') - 这指向li,但你想要一个动作;
$('#content-1') - you search for element with id content-1, which is div, but you use $(this) (which still is div) expecting it has attribute href.
$('#content-1') - 你搜索id为content-1的元素,即div,但你使用$(this)(仍然是div)期望它有属性href。
Your href will be proceed by default, if you would click on anchor, but not on li
默认情况下,如果你点击锚点,你的href将会继续,但不会点击
#5
-1
try like this
试试这样
window.location.href = someUrl;