스크립트 질문 ㅠㅠ
본문
안녕하세요
랜딩페이지를 만드는데 스크립트 질문드립니당. .
http://renewal.afms.co.kr/afms/afms.php?&me_code=20#;
이 페이지에서 저 위 이미지에 있는 서랍메뉴가있는 섹션을 작업하고있구요 ,,
섹션 1-장기수선계획, 섹션 2-시설관리시스템, 섹션 3- 유지관리이력정보 등록시스템
각 섹션 안에서 메뉴 하나를 클릭하면 다른 메뉴가 닫히는 구조인데,
섹션1 중, 하나를 닫으면 섹션 2, 3에 있는 메뉴도 닫혀버립니다 .. ( 각 섹션의 첫번쨰 메뉴는 오픈했을떄 열려있음)
어렵게 설명드려 죄송합니다 ㅠㅠ 각자의 섹션 안에서만 작동이 되게 하고싶은데 수정 도움 부탁드립니다 ㅠㅠ
<script>
//탭슬라이더
var cnum=1;
function contabroll(num){
var knum;
if(num){
knum = num;
cnum = num;
} else {
knum = cnum;
}
var con = document.getElementById('contabroll').getElementsByTagName('dt');
var tab = document.getElementById('contabroll').getElementsByTagName('dd');
for(i=1;i<=con.length;i++){
con[i-1].className = (knum==i)? 'on' : '';
tab[i-1].className = (knum==i)? 'on' : '';
}
cnum++;
if(cnum>con.length) cnum = 1;
}
function contabrolling(type){
(type=='start')? ctr = setInterval(contabroll,5000) : clearTimeout(ctr);
}
contabroll(1);
contabrolling('start');
var cnum2=1;
function contabroll2(num){
var knum;
if(num){
knum = num;
cnum = num;
} else {
knum = cnum;
}
var con = document.getElementById('contabroll2').getElementsByTagName('dt');
var tab = document.getElementById('contabroll2').getElementsByTagName('dd');
for(i=1;i<=con.length;i++){
con[i-1].className = (knum==i)? 'on' : '';
tab[i-1].className = (knum==i)? 'on' : '';
}
cnum++;
if(cnum>con.length) cnum = 1;
}
function contabrolling(type){
(type=='start')? ctr = setInterval(contabroll,5000) : clearTimeout(ctr);
}
contabroll2(1);
//서랍메뉴
// $(".card_detail__btn").css("transform","rotate(270deg)");
// $(".faq_tit").css("color","#25aaf3");
$(".detail_view").click(function(){
//다른 메뉴 초기화
$('.media-content__detail').slideUp();
$('.card_detail__btn').css({"transform":"rotate(0deg)","color":"#888888"});
$(".faq_tit").css("color","#222222");
var submenu = $(this).parents().children(".media-content__detail");
if( submenu.is(":visible") ){
$(this).parent().find(".card_detail__btn").css({"transform":"rotate(0deg)","color":"#888888"});
$(this).parent().find(".faq_tit").css("color","#222222");
//$(this).css("transform","rotate(0deg)");
submenu.slideUp();
}else{
$(this).parent().find(".card_detail__btn").css({"transform":"rotate(270deg)","color":"#25aaf3"});
$(this).parent().find(".faq_tit").css("color","#25aaf3");
//$(this).css("transform","rotate(180deg)");
submenu.slideDown();
}
});
</script>
답변 2
var accordionEvent = function(obj) {
this.obj = obj;
var el = obj.el;
var contents = obj.contents;
var opens = obj.opens;
var openIndex = obj.openIndex;
var duration = obj.duration ? obj.duration : 300;
var initAfterEvent = obj.initAfterEvent;
var overlap = obj.overlap;
var onClick = obj.onClick;
var downAfterEvent = obj.downAfterEvent;
var downAddEventListener = obj.downAddEventListener;
var upAfterEvent = obj.upAfterEvent;
var upAddEventListener = obj.upAddEventListener;
var slideDownEvent = function(target) {
target.addClass('active');
target.find(contents).stop().slideDown(duration, function() {
if (downAfterEvent) {
downAfterEvent(target);
}
});
if (downAddEventListener) {
downAddEventListener(target);
}
if (!overlap) {
target.siblings().removeClass('active');
target.siblings().find(contents).stop().slideUp();
}
}
var slideUpEvent = function(target) {
target.removeClass('active');
target.find(contents).stop().slideUp(duration, function() {
if (upAfterEvent) {
upAfterEvent(target);
}
});
if (upAddEventListener) {
upAddEventListener(target);
}
if (!overlap) {
target.siblings().removeClass('active');
target.siblings().find(contents).stop().slideUp();
}
}
var init = function() {
var _target = $(el);
if (opens) {
_target.each(function(i) {
var _this = $(this);
var _parents = _this.parent();
if (i === openIndex) {
slideDownEvent(_parents);
}
})
}
_target.on('click', function() {
var _this = $(this);
var _parents = _this.parent();
if (_parents.hasClass('active')) {
slideUpEvent(_parents)
} else {
slideDownEvent(_parents)
}
if (onClick) {
onClick(_this);
}
});
if (initAfterEvent) {
initAfterEvent();
}
};
return init();
}
var accordion = new accordionEvent({
// 아코디언 버튼
el : 버튼 selector, // #contabroll a.detail_view
// 아코디언 컨텐츠
contents : 컨텐츠 selector, // #contabroll .media-content__detail
// 로드시 아코디언 펼침
opens : false,
// 로드시 아코디언 펼칠때 열릴 인덱스
openIndex : 0,
// 중복선택
overlap : false,
// 애니메이션 시간
duration: 300,
// 아코디언 이벤트 세팅 후 커스텀이벤트 등록
initAfterEvent : function() {
console.log('init')
},
// 다운애니메이트 동시 이벤트 등록
downAddEventListener: function(el) {
console.log('down')
},
// 다운애니메이트 콜백
downAfterEvent: function(el) {
console.log('down after')
},
// 업 애니메이트 동시 이벤트 등록
upAddEventListener: function(el) {
console.log('up')
},
// 업 애니메이트 콜백
upAfterEvent: function(el) {
console.log('up after')
},
});
예제 : https://codepen.io/moon-chai-jung-arkiad/pen/KKRZOvW
오래전에 만들어둔거라.. 코드도 좀 이상한 부분도 있긴할텐데.. 새로 만든 코드를 찾지를 못해 일단 참고하시라고 남겨둡니다.. !-->
직접적인 영향인지는 모르겠지만 콘솔에러가 나고 있는 상태이긴 합니다.
main.js:18 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#;' is not a valid selector.
at select (http://renewal.afms.co.kr/theme/ety_wide_theme/js/main.js:18:23)
at http://renewal.afms.co.kr/theme/ety_wide_theme/js/main.js:155:11
afms.php:763 Uncaught TypeError: contabroll3 is not a function
at HTMLElement.onclick (VM327 afms.php:763:55)
답변을 작성하시기 전에 로그인 해주세요.