Question

我想在点击一个锚标签时执行一些jquery函数，然后继续前进到超链接href所采用的任何地方。

<li><a href="#3">3. Lorem</a></li>

当我点击这个时，我执行折叠以打开此锚点的相对手风琴，然后在collapse()之后使用location.href = $(this).attr('href');执行超链接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(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>

的 jsFiddle

Answer 1

像这样......

$('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;
    });
});

Answer 2

回应评论。

您只需使用工作片段即可缩小所有JS代码：

$('ul > li').on('click', function(e){
    var n = $(this).index() + 1;
    $('#content-' + n).collapse('show', function(){
        e.preventDefault();
        location.href = $(this).attr('href');
    });
});

JsFiddle

Answer 3

首先，修改所有以数字开头的id。与id="12"到id="id-12"一样。

然后在<li><a href="#12">12. Lorem</a></li>。

将href更改为href="#id-12"

Answer 4

你的代码很乱。

$('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＆gt; li：nth-child（1）'） - 这指向li，但你想要一个动作;

$（'＃content-1'） - 你搜索id为content-1的元素，即div，但你使用$（this）（仍然是div），期望它有属性href。

如果你点击锚点，你的href将会默认进行，但不会点击li

Answer 5

试试这个

window.location.href = someUrl;

如何在jquery函数后执行anchor href？

5 个答案: