유니콘 스킨 모바일 하위 카테고리 접속

  <li class="">
    <a class="link_item" href="/category/diary2">
      diary2 <!--상위 카테고리-->
    </a>
    
    <ul class="sub_category_list">
      <li class="">
        <a class="link_sub_item" href="/category/diary2/2022%28%E4%B8%8A%29">
          2022(上)<!--하위 카테고리 1-->
        </a>
      </li>
      <li class="">
        <a class="link_sub_item" href="/category/diary2/2022%28%E4%B8%8B%29">
          2022(下)<!--하위 카테고리 2-->
        </a>
      </li>
      <li class="">
        <a class="link_sub_item" href="/category/diary2/etc">
          etc<!--하위 카테고리 3-->
        </a>
      </li>
    </ul>
  </li>

 

자 본론부터 들어갈게요 제가 스킨에서 사용하는 카테고리 치환자를 썼을 때 상위 카테고리와 하위 카테고리가 나눠지는 모습입니다. (이하 상위, 하위로 줄여 말합니다)

 

※ 대부분 스킨에 하위 카테고리를 저처럼 여러개 사용하시는 분들이 많아 하위는 css에서 display: none으로 일시적으로 안보이게 해둔 상태들입니다

 

1. 여기서 제가 제이쿼리로 명령어를 넣은 것은 "sub_category_list 를 포함한 li 태그에 마우스를 올렸다가 내리면 sub_category_list 가 펼쳐졌다가, 닫히도록 하여라" 입니다.

 

2. pc에서는 제대로 구현이 됩니다. 하지만 모바일에서는 마우스를 올렸다 내리는 행위가 불가능하죠. 그 대신 '터치' 가 '클릭'의 역할을 하고, 클릭의 행위 안에 마우스를 올리는 행위가 포함되어 있는 건 이해하기 쉬울 거예요. 마우스를 올려야 클릭을 하니까요.

 

3. 따라서 모바일에서는 상단을 클릭하면 해당 li 태그에 가장 상위로 올라와있는 a 하이퍼링크 태그가 작동하면서 상위 카테고리로 진입하게 됩니다.

 

4. 그럼 하위를 보기 위해서는 상위 진입을 막도록 하면 됩니다. 3에서 말한 a 태그의 링크 속성을 사라지게 만들면 돼요. 그게 바로 아래 명령어입니다. "sub_category_list를 가진 li 태그의 직계자식 a 를 선택하여 href 라는 속성을 없앤다"

 

$('li:has(".sub_category_list") > a').removeAttr("href");

 

5. html 하단 부분마다 <script> 태그 안에 여러가지 명령어들이 들어있을 텐데, 그 속에 넣어주면 되는 코드입니다!

그럼 결과는? 상위를 클릭해도 해당 링크에 진입할 수 없게 됩니다. 대신 하위 카테고리들에 자유롭게 진입이 가능해지죠. pc는 물론, 모바일에서도요!

 

---

 

인사도 없이 말이 길어졌네요 이 부분은 제가 백업하기 위해서도 그렇고 여러분이 참고하시기 편리하라고 써두는 글입니다. 글이 어렵고 이해가 안된다면 댓글을 달아주세요 ㅎㅎ 

 

실은 모바일에서만 저 코드를 실행하게 만들 수도 있는데 난이도가 좀 더 올라가서 이해하시기 힘들 수도 있을 것 같아서... 쉽게 볼 수 있는 글이면 좋겠는데 if문까지 등장해버리면 여러분도 저도 지칠 것 같아서요 ....

제 표현력이 많이 좋아지고 능숙해지면 그때 다시 데려오도록 할게요...ㅜㅜㅋㅋㅋ 웃픈 현실.. 코드가 네... 많이 어렵죠 저도 동감입니다..

 

최근 스킨에는 저 명령어가 거의 다 들어가있는데 예전 스킨들 사용하시는 분들이 보고 도움 얻어가셨으면 좋겠네요 그럼 말 줄이겠습니다 모두들 얼마 남지 않은 여름 건강하게 보내세요~!