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

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

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

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

Q&A

解決済

1回答

753閲覧

ドロワーナビゲーションの中の検索フォームをクリックするとドロワーナビが閉じてしまいます。

toremy

総合スコア52

jQuery

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

0グッド

2クリップ

投稿2019/10/24 06:57

困っていること
スマートフォンにてドロワーナビ内に検索フォームを設置しています。
検索キーワードを入力しようとして、フォーム(検索窓)をタップすると、ドロワーナビが閉じられてしまいます。

使用しているjs

jQuery

1! function (e) { 2 "use strict"; 3 "function" == typeof define && define.amd ? define(["jquery"], e) : "object" == typeof exports ? module.exports = e(require("jquery")) : e(jQuery) 4}(function (e) { 5 "use strict"; 6 var t = void 0 !== document.ontouchstart, 7 s = { 8 init: function (t) { 9 return t = e.extend({ 10 iscroll: { 11 mouseWheel: !0, 12 preventDefault: !1 13 }, 14 showOverlay: !0 15 }, t), s.settings = { 16 state: !1, 17 events: { 18 opened: "drawer.opened", 19 closed: "drawer.closed" 20 }, 21 dropdownEvents: { 22 opened: "shown.bs.dropdown", 23 closed: "hidden.bs.dropdown" 24 } 25 }, s.settings.class = e.extend({ 26 nav: "drawer-nav", 27 toggle: "drawer-toggle", 28 overlay: "drawer-overlay", 29 open: "drawer-open", 30 close: "drawer-close", 31 dropdown: "drawer-dropdown" 32 }, t.class), this.each(function () { 33 var n = this, 34 r = e(this); 35 r.data("drawer") || (t = e.extend({}, t), r.data("drawer", { 36 options: t 37 }), s.refresh.call(n), t.showOverlay && s.addOverlay.call(n), e("." + s.settings.class.toggle).on("click.drawer", function () { 38 return s.toggle.call(n), n.iScroll.refresh() 39 }), e(window).on("resize.drawer", function () { 40 return s.close.call(n), n.iScroll.refresh() 41 }), e("." + s.settings.class.dropdown).on(s.settings.dropdownEvents.opened + " " + s.settings.dropdownEvents.closed, function () { 42 return n.iScroll.refresh() 43 })) 44 }) 45 }, 46 refresh: function () { 47 this.iScroll = new IScroll("." + s.settings.class.nav, e(this).data("drawer").options.iscroll) 48 }, 49 addOverlay: function () { 50 var t = e(this), 51 n = e("<div>").addClass(s.settings.class.overlay + " " + s.settings.class.toggle); 52 return t.append(n) 53 }, 54 toggle: function () { 55 var e = this; 56 return s.settings.state ? s.close.call(e) : s.open.call(e) 57 }, 58 open: function () { 59 var n = e(this); 60 return t && n.on("touchmove.drawer", function (e) { 61 e.preventDefault() 62 }), n.removeClass(s.settings.class.close).addClass(s.settings.class.open).drawerCallback(function () { 63 s.settings.state = !0, n.trigger(s.settings.events.opened) 64 }) 65 }, 66 close: function () { 67 var n = e(this); 68 return t && n.off("touchmove.drawer"), n.removeClass(s.settings.class.open).addClass(s.settings.class.close).drawerCallback(function () { 69 s.settings.state = !1, n.trigger(s.settings.events.closed) 70 }) 71 }, 72 destroy: function () { 73 return this.each(function () { 74 var t = this, 75 n = e(this); 76 e("." + s.settings.class.toggle).off("click.drawer"), e(window).off("resize.drawer"), e("." + s.settings.class.dropdown).off(s.settings.dropdownEvents.opened + " " + s.settings.dropdownEvents.closed), t.iScroll.destroy(), n.removeData("drawer").find("." + s.settings.class.overlay).remove() 77 }) 78 } 79 }; 80 e.fn.drawerCallback = function (t) { 81 var s = "transitionend webkitTransitionEnd"; 82 return this.each(function () { 83 var n = e(this); 84 n.on(s, function () { 85 return n.off(s), t.call(this) 86 }) 87 }) 88 }, e.fn.drawer = function (t) { 89 return s[t] ? s[t].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof t && t ? void e.error("Method " + t + " does not exist on jQuery.drawer") : s.init.apply(this, arguments) 90 } 91});

html

1<nav class="drawer-nav" role="navigation" style="touch-action: none;"> 2<h1 class="navi" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">menu</h1> 3 4<!-- serchbox --> 5<div class="serchbox"> 6<form action="URL"><label><input type="text" name="keyword" maxlength="1000"></label><button type="submit"><i class="material-icons">search</i></button></form> 7</div> 8<!-- content_menu --> 9<ul class="list-menu"> 10<li>リスト1</li> 11<li>リスト2</li> 12<li>リスト3</li> 13</ul> 14 15</nav>

closeの当たりのスクリプトの書き方なのかなと思うのですが、どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ざっと見た感じ、子要素であるフォームを持ったsearcboxクラスまでイベントがバブリングされてしまっている気がします。つまり、
●ナビをタップした、
●フォームをタップした
が同じ開閉のアクションになってしまっているので、子要素searchboxにイベントが伝播しないようにしないといけません

この場合は**preventDefault()**が適切でしょうか。
バブリング(伝達) jQuery

投稿2019/11/01 08:15

FKM

総合スコア3608

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問