当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery open div with containing li class="active"

问题描述:

I'm using this script for toggling/accordioning divs on my website:

<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>

for controlling this HTML-markup:

<!-- .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>

You can see that in the first div there is an li class="active". I want to achieve that the div class "project padding group" which contains an li class="active" is opened on page-load.

Any suggestions on how to make this possible?

网友答案:

How about a cleaner approach?

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

});
网友答案:

use the following selector:

$( 'li.active' ).closest( 'div.project.padding.group' )
分享给朋友:
您可能感兴趣的文章:
随机阅读: