KJN
288
2021-11-25 10:58:12
2
104

css, javascript로 버튼 클릭시 <span>+</span>이 <span>-</span>으로, 그 반대도 되도록 작업하고싶습니다.


https://www.hyundai-autoever.com/kor/main/index.do

위의 링크에서 메뉴버튼을 클릭하면 나오는 리스트들 중 하나를 클릭하면 +기호가 -기호로 바뀌는 모습을 볼 수 있습니다.

이를 구현하고싶어서 저는

<span class="viewSubMenu viewSubMenu1">-</span><span class="viewSubMenu viewSubMenu2">-</span>

2개의 span을 만들고, 각각 '-' 기호를 넣었습니다.

.viewSubMenu1 {
transform: rotate(90deg);
}

그리고 그 중 하나에 rotate를 넣고,

$(".viewSubMenu1").addClass("openSubMenu");

버튼 클릭 시 addClass("openSubMenu")를 하여

.viewSubMenu1.openSubMenu {
transform: rotate(0deg);
}

해당 클래스가 추가된 경우 rotate를 0으로 수정하는 형식으로 작업을 진행했습니다.

css에 transition:.3s 를 작성하여 돌아가는 모습 또한 보이도록 작업이 되었습니다.

아직 -기호의 위치는 제대로 수정하지않아 모양이 이상하긴 하지만 기능 자체는 정상적으로 되고있는 모습은 볼 수 있는데, 이 방법 말고 다른 방법이 있을지 알고싶습니다.

0
  • 답변 2

  • a785312468
    362
    2021-11-25 11:19:00 작성 2021-11-25 11:28:51 수정됨

    참고하신 페이지에서 만드시는 기능에 대한 css가 있는것 같습니다. :)


    /* all_menu - START */

    .all_menu {display: none; position: fixed; left: 0; top: 0; width: 100%; /* height: 100vh; */ height: 100%; background: url(../images/typeb-menu-bg.jpg) center center/cover no-repeat; z-index: 30;}

    .all_menu .menu_scroll_area {position: relative; height: 100%; overflow-x: hidden; overflow-y: hidden;}

    .all_menu .menu_scroll_area.has_scroll {overflow-y: auto;}

    .all_menu .gnb {/* display:none; */ opacity: 0; position: absolute; top: 15%; left: 55%; transform: translate(-50%, 0); width: 60%; height: auto;}

    .all_menu .gnb > li {display: block; text-align: left;}

    .all_menu .gnb > li .one_depth {opacity: .5; position: relative; display: inline-block; padding: 0 50px 0 0; height: auto; font-family: "neue-haas-unica", sans-serif; font-weight: 600; font-size: 56px; color: #fff; line-height: 98px; transition: opacity .3s ease;}

    .all_menu .gnb > li .one_depth:before {content: "";display: block;position: absolute;left: auto;right: 0;top: 50%;transform: translateY(-50%);width: 20px;height: 6px;background-color: #fff;}

    .all_menu .gnb > li .one_depth:after {content: "";display: block;position: absolute;left: auto;right: 0;top: 50%;transform: translateY(-50%) rotate(90deg);width: 20px;height: 6px;background-color: #fff;transition: transform .3s ease;}

    .all_menu .gnb > li .one_depth.on {opacity: 1;}

    .all_menu .gnb > li .one_depth.on:after {transform: translateY(-50%) rotate(0deg);}

    .all_menu .gnb > li .two_pack_wrap {display: none;}

    .all_menu .gnb > li .two_pack {display: flex; flex-wrap: wrap; position: static; transform: translateX(0); margin: -30px 0 63px; overflow: hidden;}

    .all_menu .gnb > li .two_pack > li {display: block; margin-top: 50px; margin-right: 80px; padding: 0;}

    .all_menu .gnb > li .two_pack > li:last-child {margin-right: 0;}

    .all_menu .gnb > li .two_pack .two_depth {color: #fff;}

    .all_menu .gnb > li .two_pack.open_finish {display: flex !important; flex-wrap: wrap;}

    .all_menu .gnb > li .three_pack .three_depth {color: #a7a7a7;}

    .all_menu .gnb > li .three_pack .three_depth:after {display: none;}

    .all_menu .gnb > li:last-child {padding-bottom: 100px;}

    .all_menu .gnb.initial > li .one_depth {opacity: 1;}

    /* .all_menu {position: absolute; left: 120px; bottom: 80px;} */

    .all_menu .snsbt_pack {position: absolute; right: 103px; bottom: 80px;}

    /* .all_menu .snsbt_pack .btn.youtube {background: url(../images/typeb-menu-ytubbt.svg) 0 0 no-repeat;} */ /* 2021-05-17 삭제 */

    .all_menu .snsbt_pack .btn:last-child {margin-right: 0;}

    .all_menu .util_pack {position: absolute; left: 120px; bottom: 80px;}

    .all_menu .util_pack .btn {display: block; margin-bottom: 18px; padding-left: 68px; height: 48px; line-height: 26px; color: #fff; font-size: 16px;}

    .all_menu .util_pack .btn.nav_update {font-family: "spoqa_bold", sans-serif; font-size: 14px; line-height: 21px; background: url(../images/typeb-menu-navibt.png) no-repeat 0 0/48px;}

    .all_menu .util_pack .btn.subs_newsletter {background: url(../images/typeb-menu-newletterbt.png) no-repeat 0 0;}

    .all_menu .util_pack .btn:last-child {margin-bottom: 0;}

    .all_menu .lang_box {position: absolute; left: 95px; top: 38px;}

    .all_menu .lang_box .btn {margin-left: 22px; font-family: "neue-haas-unica", sans-serif; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0;}

    .all_menu .lang_box .btn:first-child {margin-left: 0;}

    /* .all_menu .btn_search {position: absolute; top: 30px; right: 179px; width: 40px; height: 40px; background: url(../images/typeb-menu-srchbt.png) 0 0 no-repeat;} 2021-06-09 검색 버튼 삭제 */

    .all_menu .btn_close {position: absolute; top: 30px; right: 120px; width: 40px; height: 40px; background: url(../images/typeb-menu-xbt.png) 0 0 no-repeat;}

    /* .all_menu.open .btn_search {right: 196px;} 2021-06-09 검색 버튼 삭제 */

    .all_menu.open .btn_close {right: 137px;}

    .all_menu.open .snsbt_pack {right: 120px;}

    .all_menu.open .lang_box {left: 95px;}

    /* all_menu - END */


    - 출처 : https://www.hyundai-autoever.com/kor/main/index.do 현대오토에버

  • TeraGo
    850
    2021-11-25 11:31:35

    다른방법으로는 span 안에 span 하나 더 만들고 높이0으로.


    포지션으로 중간에 띄워주고 부모 span 에 class 가 추가되면 높이 100% 처리하면 적당히 그려지는거처럼 나오겠네요.

  • 로그인을 하시면 답변을 등록할 수 있습니다.