質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

249閲覧

ナビゲーション「Stripe.com Navigation」の動作を修正したい

laki

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/07/25 15:45

編集2017/07/26 04:05

ナビゲーション「Stripe.com Navigation」を新規サイトに使いたいのですが、
iPadではタッチでメニューを閉じることはできませんでした。
メニューではない部分をタップしたら、プルダウンメニューを閉じるようにコードを追加してみたのですが(webデザイナーなので、jQueryは苦手です。)、メニューの動きも止まってしまいます。

jQuery(document).ready(function($){ function morphDropdown( element ) { this.element = element; this.mainNavigation = this.element.find('.main-nav'); this.mainNavigationItems = this.mainNavigation.find('.has-dropdown'); this.dropdownList = this.element.find('.dropdown-list'); this.dropdownWrappers = this.dropdownList.find('.dropdown'); this.dropdownItems = this.dropdownList.find('.content'); this.dropdownBg = this.dropdownList.find('.bg-layer'); this.mq = this.checkMq(); this.bindEvents(); } morphDropdown.prototype.checkMq = function() { //check screen size var self = this; return window.getComputedStyle(self.element.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', '); }; morphDropdown.prototype.bindEvents = function() { var self = this; //hover over an item in the main navigation this.mainNavigationItems.mouseenter(function(event){ //hover over one of the nav items -> show dropdown self.showDropdown($(this)); }).mouseleave(function(){ setTimeout(function(){ //if not hovering over a nav item or a dropdown -> hide dropdown if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown(); }, 50); }); //hover over the dropdown this.dropdownList.mouseleave(function(){ setTimeout(function(){ //if not hovering over a dropdown or a nav item -> hide dropdown (self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) && self.hideDropdown(); }, 50); }); //click on an item in the main navigation -> open a dropdown on a touch device this.mainNavigationItems.on('touchstart', function(event){ var selectedDropdown = self.dropdownList.find('#'+$(this).data('content')); if( !self.element.hasClass('is-dropdown-visible') || !selectedDropdown.hasClass('active') ) { event.preventDefault(); self.showDropdown($(this)); } }); //on small screens, open navigation clicking on the menu icon this.element.on('click', '.nav-trigger', function(event){ event.preventDefault(); self.element.toggleClass('nav-open'); }); }; morphDropdown.prototype.showDropdown = function(item) { this.mq = this.checkMq(); if( this.mq == 'desktop') { var self = this; var selectedDropdown = this.dropdownList.find('#'+item.data('content')), selectedDropdownHeight = selectedDropdown.innerHeight(), selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(), selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2; //update dropdown position and size this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft)); //add active class to the proper dropdown item this.element.find('.active').removeClass('active'); selectedDropdown.addClass('active').removeClass('move-left move-right').prevAll().addClass('move-left').end().nextAll().addClass('move-right'); item.addClass('active'); //show the dropdown wrapper if not visible yet if( !this.element.hasClass('is-dropdown-visible') ) { setTimeout(function(){ self.element.addClass('is-dropdown-visible'); }, 10); } } }; morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) { this.dropdownList.css({ '-moz-transform': 'translateX(' + left + 'px)', '-webkit-transform': 'translateX(' + left + 'px)', '-ms-transform': 'translateX(' + left + 'px)', '-o-transform': 'translateX(' + left + 'px)', 'transform': 'translateX(' + left + 'px)', 'width': width+'px', 'height': height+'px' }); this.dropdownBg.css({ '-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')', '-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')', '-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')', '-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')', 'transform': 'scaleX(' + width + ') scaleY(' + height + ')' }); }; morphDropdown.prototype.hideDropdown = function() { this.mq = this.checkMq(); if( this.mq == 'desktop') { this.element.removeClass('is-dropdown-visible').find('.active').removeClass('active').end().find('.move-left').removeClass('move-left').end().find('.move-right').removeClass('move-right'); } }; morphDropdown.prototype.resetDropdown = function() { this.mq = this.checkMq(); if( this.mq == 'mobile') { this.dropdownList.removeAttr('style'); } }; var morphDropdowns = []; if( $('.cd-morph-dropdown').length > 0 ) { $('.cd-morph-dropdown').each(function(){ //create a morphDropdown object for each .cd-morph-dropdown morphDropdowns.push(new morphDropdown($(this))); }); var resizing = false; //on resize, reset dropdown style property updateDropdownPosition(); $(window).on('resize', function(){ if( !resizing ) { resizing = true; (!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition, 300) : window.requestAnimationFrame(updateDropdownPosition); } }); function updateDropdownPosition() { morphDropdowns.forEach(function(element){ element.resetDropdown(); }); resizing = false; }; } });

###試したこと
ナビ以外のところをタッチしたら、ドロップダウンが消えればいいと考えました。
検索したコードに、ドロップダウンが消える処理を書きました。(その時どう書いたか忘れてしまいました)
しかし、消えた後ドロップダウンはメニューをタップしても出でこなくなりました。

$(document).on('click touchend', function(event) { if (!$(event.target).closest('#target').length) { // ここに処理; } });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

回答で教えていただいたコードと、ネットでの参考コードをあわせた追加コードで、タッチで閉じることができるようになりました。

$(document).on('click touchend', function(e) { if (!$(e.target).closest('.main-nav').length) { morphDropdowns.forEach(function (morphDropdown) { morphDropdown.hideDropdown(); }); } });

投稿2017/07/27 01:04

laki

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

以下、morphDropdownが開かれた状態で、bodyタグがクリックされた場合、morphDropdownを閉じる処理を追加したコードになります。

javascript

1 if( $('.cd-morph-dropdown').length > 0 ) { 2 $('.cd-morph-dropdown').each(function(){ 3 //create a morphDropdown object for each .cd-morph-dropdown 4 morphDropdowns.push(new morphDropdown($(this))); 5 }); 6 7 var resizing = false; 8 9 //on resize, reset dropdown style property 10 updateDropdownPosition(); 11 $(window).on('resize', function(){ 12 if( !resizing ) { 13 resizing = true; 14 (!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition, 300) : window.requestAnimationFrame(updateDropdownPosition); 15 } 16 }); 17 18 function updateDropdownPosition() { 19 morphDropdowns.forEach(function(element){ 20 element.resetDropdown(); 21 }); 22 23 resizing = false; 24 }; 25 26 27 // ここから 28 // bodyがクリックされたら、morphDropdownを閉じる 29 $('body') 30 .on('click', () => { 31 morphDropdowns.forEach(function (morphDropdown) { 32 morphDropdown.hideDropdown(); 33 }); 34 }); 35 // ここまで 36 }

投稿2017/07/26 02:49

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

laki

2017/07/26 04:07

回答ありがとうございます。コードを追加して試してみましたが、残念ながらドロップダウンも止まってしまい、うまくいきませんでした。 質問に試したことを追加したのですが、そのコードとミックスしてもう一度チャレンジしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問