Question

我正在使用此脚本在我的网站上切换/折叠div：

<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”。我想实现在页面加载时打开包含 li class =“active”的 div class“项目填充组”。

有关如何实现这一目标的任何建议吗？

Answer 1

如何更清洁的做法？

FIDDLE

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

});

Answer 2

使用以下选择器：

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

包含li class =“active”的jquery open div

2 个答案: