j쿼리 탭롤링에서 li숨김 코드좀 찾아주세요 채택완료
마인드핵
10년 전
조회 4,271
</p><p>;(function($) {
$.fn.tabs = function(options) {
// 옵션 설정.
options = $.extend({
start_index: 1,
random: false,
transitions_time: 400
}, options);
// jQuery 체인.
return this.each(function() {
// 대상 참조.
var $this = $(this),
$menu = $this.find('.tab_menu'),
$menu_li = $menu.find('li'),
$menu_a = $menu_li.find('a'),
$contents = $this.find('.tab_contents'),
support_features = !Modernizr.opacity || !Modernizr.csstransitions;
// 랜덤 인덱스 설정.
if(options.random)
options.start_index = Math.floor(Math.random() * $menu_li.length + 1);
// 플러그인 대상 객체에 클래스 부여
$this.addClass('tabs');
// 처음 보여질 탭 설정.
$menu.add($contents)
.find('li:nth-child(' + options.start_index + ')').addClass('active');
// opacity 미지원 브라우저에 적용.
if(support_features) {
$menu_li.find('img').animate({'opacity': 0}, 10, function() {
$menu_li.filter('.active').find('img').animate({'opacity': 1}, 10);
});
$menu_a
.mouseover(function() {
$(this)
.stop().animate({'padding-left': '2.2em', 'padding-right': '0.8em'}, 200)
.find('img').stop().animate({'opacity': 1, 'left': 6}, 200);
})
.mouseout(function() {
if($(this).parent().hasClass('active')) return false;
$(this)
.stop().animate({'padding-left': '1.5em', 'padding-right': '1.5em'}, 200)
.find('img').stop().animate({'opacity':0, 'left': 16}, 200);
});
};
// $menu 내부의 a 클릭 시 이벤트 핸들링
$menu_a.click(function(e) {
// 대상 참조.
var $this = $(this),
target = $this.attr('href');
// 활성화된 a 클릭 시, 작동하지 않도록 설정.
if($this.parent().hasClass('active')) return;
// $menu_link에서 active 클래스 제거
$menu_li.removeClass('active');
// 클릭한 a의 부모 li에 active 클래스 추가
$this.parent().addClass('active');
// opacity 미지원 브라우저에 적용.
if(support_features) {
$menu_li.not('.active').find('a').mouseout();
$(this).mouseover();
};
// 부드러운 장면전환.
$contents.find('li')
.fadeTo(options.transition_time, 0, function() {
$(this).removeClass('active')
.filter(target).addClass('active').fadeTo(options.transition_time, 1);
});
// 브라우저 링크 기본 동작 차단
e.preventDefault();
});
}); // end: return
}; //end: plug-in
})(jQuery);</p><p>
이렇게 되어있는 JS파일입니다.
안에 있는
문제는 li 안에 있는 ul li도 같이 숨겨버립니다.
여기까지는 원래 맞는데
표시하기를 하면 li안에 있는 li는 표시가 안됩니다..
어떻게 해야 할까요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인