jquery 打开包含 li 类的 div = "active"



我正在使用此脚本在我的网站上切换/符号divs:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.xyz/js/jquery.smooth-scroll.min.js"></script> 
<script type="text/javascript">
(function($) {
    $('#navigation a').smoothScroll({
            easing: 'swing'
        });
    $('.project > .title').click(function(){
        /* Close */
        $(this).parent().siblings().children('.info').slideUp(400);
        $(this).parent().siblings().children('.title').removeClass('flip');
        $(this).parent().siblings('.project').removeClass('open');
        /* Open */
        $(this).toggleClass('flip');
        $(this).parent('.project').toggleClass('open');
        $(this).next('.info').slideToggle(400, function(){
                var project = $(this).parent('.project');
                $.smoothScroll({
                scrollTarget: project,
                easing: 'swing',
                speed: 400
                });
        });
    });
})(jQuery);
</script> 

用于控制此HTML标记:

<!-- .project -->
<div class="project padding group">
    <div class="title group limiter"><h3>START</h3></div>
    <div class="info group limiter">
        <div class="left">
        <ul>
        <li><a href="aktuell.html" title="AKTUELL" >AKTUELL</a></li>
        <li class="active"><a href="jobs.html" title="JOBS" >JOBS</a></li>
        <li><a href="presse.html" title="PRESSE" >PRESSE</a></li>
        <li><a href="projekte.html" title="PROJEKTE" >Projekte</a></li>
        <li><a href="archiv.html" title="ARCHIV" >Archiv</a></li>
        </ul>
        </div>
        <div class="right">123</div>
    </div>
</div>
<!-- .project -->
<div class="project padding group">
    <div class="title group limiter"><h3>COMPANY</h3></div>
    <div class="info group limiter">
        <div class="left">
        <ul>
        <li><a href="1.html" title="1" >1</a></li>
        <li><a href="2.html" title="2" >2</a></li>
        <li><a href="3.html" title="3" >3</a></li>
        <li><a href="4.html" title="4" >4</a></li>
        <li><a href="5.html" title="5" >5</a></li>
        </ul>
        </div>
        <div class="right">123</div>
    </div>
</div>

您可以看到,在第一个Div中,有一个 li class =" Active" 。我想实现div类"项目填充组" ,其中包含 li class =" active" 在页面上打开。

关于如何使之成为可能的任何建议?

如何清洁方法?

小提琴

$(document).ready(function(){
$('#navigation a').smoothScroll({
    easing: 'swing'
});
$('.title').click(function() {
    $('.info').slideUp(400);
    $(this).parent('div').find('.info').slideDown(400);
});
$('li.active').closest('.info').slideDown(400);
});

使用以下选择器:

$( 'li.active' ).closest( 'div.project.padding.group' )

最新更新