테스트 사이트 - 개발 중인 베타 버전입니다

고수님들 조언부탁드립니다 채택완료

대한사랑 1년 전 조회 2,188
아래 소스에서 이미지를 클릭시 링크들이 나타나고
다시 이미지를 클릭하면 이미지는 남고 링크들만 사라지게 끔
조언부탁드립니다

<style>
    .translation-links {
      display: none;
    }
  </style>
 
<div class="translation-links">
  <img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/>

  <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개

채택된 답변
+20 포인트
1년 전

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

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

</p>

<p><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></p>

<p>

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

대한사랑
1년 전
소수를 수정해 보았으나 뜻하는데로 되지는 않았습니다

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

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

다시 구글이미지를 클릭하면 국기들이 사라지게 하려고 합니다
설국열차
1년 전
보니까 페이지가 로딩이 되는것 같습니다.
쿠키나 로컬스토리지로 값을 만들어서 처리해야 합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인