現状の仕様ですが、
「→クリック」というリンクをクリックすると
「アコーディオン」が開き、
その中の「アンカーリンク先」まで遷移する
という作りになっているのですが、
これを、
「→クリック」というリンクをクリックすると
同じページがブラウザの別タブとして開き、
その別タブ内の「アコーディオン」が開き、
その中の「アンカーリンク先」まで遷移する
という風にしたいです。
同ページの別タブを開き、別タブ内のその後の処理をする、
というのがうまくいきません。
現状の
$('.link-open').on('click',function()
の記述に対して
window.open(this.href, '_blank');
を追記しても、ただ別タブが開くだけで、
処理自体は、元のページにされるだけになります。
少しややこしいですが、ご享受いただければと思います。。。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6 .link-open{ 7 display: block; 8 margin-bottom: 20px; 9 } 10 .ac-box{ 11 padding: 0; 12 margin: 0; 13 position: relative; 14 z-index: 1; 15 } 16 .ac-btn{ 17 background: #ccc; 18 cursor: pointer; 19 position: absolute; 20 bottom: -100px; 21 width: 100%; 22 text-align: center; 23 } 24 .ac-body .ac-inner{ 25 padding: 50px; 26 } 27</style> 28</head> 29<body> 30<div class="contents"> 31 <a href="" class="link-open">→クリック</a> 32 33 <div class="ac-box"> 34 <div class="ac-btn ac-btn-open01 -more"> 35 <p class="text">アコーディオン</p> 36 </div> 37 <div class="ac-body"> 38 <div class="ac-inner"> 39 <div id="anchor">アンカーリンク先</div> 40 </div> 41 </div> 42 </div> 43</div> 44<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 45<script src="common.js"></script> 46<script type="text/javascript"> 47 //リンクをクリックでアコーディオンが開きアンカーリンク先まで遷移する処理 48 $(function () { 49 $('.link-open').on('click',function(){ 50 $('.js-modal').fadeOut(); 51 $('.ac-btn-open01').trigger('click'); 52 var position = $('#anchor').offset().top; 53 $("html, body").animate({scrollTop:position}, 300, "swing"); 54 return false; 55 }); 56 }); 57</script> 58</body> 59</html>
javascript
1$(function(){ 2 //アコーディオン開け閉め処理 3 var acBtn = $('body').find('.ac-btn'); 4 var acArray = []; 5 for (var i = 0; i < acBtn.length; i++) { 6 acArray.push("ga_btn_" + i); 7 } 8 $(".ac-btn").each(function(i){ 9 $(this).children(".text").addClass(acArray[i]); 10 }); 11 12 $('.ac-btn').next(".ac-body").hide(); 13 $('.ac-btn').on("click",function () { 14 15 var acIndex = $('.ac-btn').index(this); 16 if ($(this).next(".ac-body").is(':hidden')) { 17 $(this).next(".ac-body").slideDown(); 18 $(this).addClass('-open'); 19 20 $(this).children(".text").removeClass(acArray[acIndex]); 21 if($(this).hasClass('-more')) { 22 $(this).children(".text").text('閉じる'); 23 } 24 } else { 25 $(this).next(".ac-body").slideUp(); 26 $(this).removeClass('-open'); 27 $(this).children(".text").addClass(acArray[acIndex]); 28 if($(this).hasClass('-more')) { 29 $(this).children(".text").text('アコーディオン'); 30 var position = $(this).parent(".ac-box").offset().top; 31 $("html, body").animate({scrollTop:position}, 300, "swing"); 32 } 33 } 34 }); 35});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/26 10:59 編集