고수님들 조언부탁드립니다

고수님들 조언부탁드립니다

QA

고수님들 조언부탁드립니다

답변 2

본문

아래 소스에서 이미지를 클릭시 링크들이 나타나고
다시 이미지를 클릭하면 이미지는 남고 링크들만 사라지게 끔
조언부탁드립니다


<style>
    .translation-links {
      display: none;
    }
  </style>
 
<div class="translation-links">
  <img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/><br>
  <a href="javascript:void(0)" class="korea" data-lang="ko" title="대한민국"><span class="flag kr"></span></a>
  <!-- 나머지 링크들... -->
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var translationLinks = document.querySelector('.translation-links');
    var img = document.querySelector('.translation-links img');
    // 이미지 클릭 시 이벤트 핸들러
    img.addEventListener('click', function () {
      if (translationLinks.style.display === 'none') {
        translationLinks.style.display = 'block';
      } else {
        translationLinks.style.display = 'none';
      }
    });
  });
</script>

이 질문에 댓글 쓰기 :

답변 2

<style>
@media (max-width: 800px) {
  .translation-links a{display:none;}
}
</style>
<script>
$(function(){
   $(".translation-links img").click(function(){
      $(".translation-links a").toggle();
   });
});
</script>

 


<script>
  document.addEventListener('DOMContentLoaded', function () {
    var translationLinks = document.querySelector('.translation-links a');
    var img = document.querySelector('.translation-links img');
    // 이미지 클릭 시 이벤트 핸들러
    img.addEventListener('click', function () {
      if (translationLinks.style.display === 'none') {
        translationLinks.style.display = 'block';
      } else {
        translationLinks.style.display = 'none';
      }
    });
  });
</script>

이렇게 한번 수정해 보세요
테스트는 해보지 않았습니다.

소수를 수정해 보았으나 뜻하는데로 되지는 않았습니다

주소는 e-madeinkorea.com 입니다 모바일로 볼 때

처음 페이지를 불러올 때 구글이미지만 있다가 이미지를 클릭하면 국기들이 나오게하고

다시 구글이미지를 클릭하면 국기들이 사라지게 하려고 합니다

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 10,639
© SIRSOFT
현재 페이지 제일 처음으로