1

私は自分のウェブサイトで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 クラス「プロジェクト パディング グループ」がページの読み込み時に開かれるようにしたいと考えています。

これを可能にする方法について何か提案はありますか?

4

2 に答える 2

0

よりクリーンなアプローチはどうですか？

フィドル

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

});
于 2012-11-10T14:51:45.950 に答える
0

次のセレクターを使用します。

$( 'li.active' ).closest( 'div.project.padding.group' )
于 2012-11-10T15:09:18.783 に答える