고수님들 조언부탁드립니다
본문
아래 소스에서 이미지를 클릭시 링크들이 나타나고
다시 이미지를 클릭하면 이미지는 남고 링크들만 사라지게 끔
조언부탁드립니다
<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 입니다 모바일로 볼 때
처음 페이지를 불러올 때 구글이미지만 있다가 이미지를 클릭하면 국기들이 나오게하고
다시 구글이미지를 클릭하면 국기들이 사라지게 하려고 합니다
보니까 페이지가 로딩이 되는것 같습니다.
쿠키나 로컬스토리지로 값을 만들어서 처리해야 합니다.
답변을 작성하시기 전에 로그인 해주세요.