스크립트 질문 ㅠㅠ

스크립트 질문 ㅠㅠ

QA

스크립트 질문 ㅠㅠ

본문

안녕하세요 

 랜딩페이지를 만드는데 스크립트 질문드립니당. .

1854873610_1664282255.1172.png

 

 

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)
답변을 작성하시기 전에 로그인 해주세요.
전체 408
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT