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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

2067閲覧

ちょっと気の利いたアコーディオン・メニューの作り方が知りたいです。

marshmallowy

総合スコア204

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2016/11/23 10:50

###前提・実現したいこと
メニューを開いたあと、別のメニューを開いたら、最初に開いたメニューを閉じたいです。
ご教授のほど、よろしくお願い申し上げます。

###発生している問題

メニューを開いたあと、別のメニューを開くと両方のメニューが開かれます。

###HTMLコード

jQuery

1jQuery.noConflict(); 2jQuery(function() { 3 jQuery('.menu').on('click', '.nav-click', function(){ 4 jQuery(this).siblings('.menu__second-level').toggle(); 5 jQuery(this).children('.nav-arrow').toggleClass('nav-rotate'); 6 }); 7});

###HTMLコード

html

1<nav class="left__nav"> 2 <div class="title">CATEGORY</div> 3 <ul class="menu cf" style="display: block;"> 4 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 5 <a href="#">バッグ</a> 6 <ul class="menu__second-level"> 7 <li class="nav-submenu-item"> 8 <a href="#">バッグパック</a> 9 </li> 10 <li class="nav-submenu-item"> 11 <a href="#">ボディーバッグ</a> 12 </li> 13 <li class="nav-submenu-item"> 14 <a href="#">メッセンジャーバッグ</a> 15 </li> 16 <li class="nav-submenu-item"> 17 <a href="#">トートバッグ</a> 18 </li> 19 <li class="nav-submenu-item"> 20 <a href="#">ポーチ・ケース</a> 21 </li> 22 </ul> 23 </li> 24 <li class="menu__single"> 25 <a href="#">アウター</a> 26 </li> 27 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 28 <a href="#">トップス</a> 29 <ul class="menu__second-level"> 30 <li class="nav-submenu-item"> 31 <a href="#">Tシャツ</a> 32 </li> 33 <li class="nav-submenu-item"> 34 <a href="#">シャツ</a> 35 </li> 36 <li class="nav-submenu-item"> 37 <a href="#">スウェット</a> 38 </li> 39 </ul> 40 </li> 41 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 42 <a href="#">ボトムス</a> 43 <ul class="menu__second-level"> 44 <li class="nav-submenu-item"> 45 <a href="#">ショートパンツ</a> 46 </li> 47 <li class="nav-submenu-item"> 48 <a href="#">ロングパンツ</a> 49 </li> 50 <li class="nav-submenu-item"> 51 <a href="#">水着</a> 52 </li> 53 </ul> 54 </li> 55 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 56 <a href="#">ソックス</a> 57 <ul class="menu__second-level"> 58 <li class="nav-submenu-item"> 59 <a href="#">ショート</a> 60 </li> 61 <li class="nav-submenu-item"> 62 <a href="#">ミディアム</a> 63 </li> 64 <li class="nav-submenu-item"> 65 <a href="#">ロング</a> 66 </li> 67 <li class="nav-submenu-item"> 68 <a href="#">レディース</a> 69 </li> 70 </ul> 71 </li> 72 <li class="menu__single"> 73 <a href="#">アンダーウェア</a> 74 </li> 75 <li class="menu__single"> 76 <a href="#">レギンス</a> 77 </li> 78 <li class="menu__single"><span class="nav-click"><i class="nav-arrow"></i></span> 79 <a href="#">小物 / その他</a> 80 <ul class="menu__second-level"> 81 <li class="nav-submenu-item"> 82 <a href="#">小物・雑貨</a> 83 </li> 84 <li class="nav-submenu-item"> 85 <a href="#">ヘッドウエア</a> 86 </li> 87 <li class="nav-submenu-item"> 88 <a href="#">ウォレット</a> 89 </li> 90 </ul> 91 </li> 92 </ul> 93</nav>

###補足情報(言語/FW/ツール等のバージョンなど)
HTML 5
jQuery 1.9.1

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

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

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

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

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

Hey_CH

2016/11/23 11:41

該当部分のCSSも追加してもらえますか?
guest

回答2

0

こんにちは。
(個人的にはCSSでやりたいところですが)このような感じで書けばうまくいくのではないでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>menu</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7</head> 8<body> 9<ul> 10 <li> 11 <h2 class="menu">項目1</h2> 12 <ul class="inner"> 13 <li> 14 <h3 class="menu">項目1-1</h3> 15 <div class="inner"> 16 項目1-1-1 17 </div> 18 </li> 19 20 <li> 21 <h3 class="menu">項目1-2</h3> 22 <div class="inner"> 23 項目1-1-2 24 </div> 25 </li> 26 27 <li>項目1-3</li> 28 </ul> 29 </li> 30 31 <li> 32 <h2 class="menu">項目2</h2> 33 <ul class="inner"> 34 <li> 35 <h2 class="menu">項目2-1</h2> 36 <ul class="inner"> 37 <li> 38 <h4 class="menu">項目2-1-1</h4> 39 <div class="inner"> 40 項目2-1-1-1 41 </div> 42 </li> 43 </ul> 44 </li> 45 <li>項目2-2</li> 46 </ul> 47 </li> 48</ul> 49<script src="jquery-1.9.1.js" charset="utf-8"></script> 50<script> 51 $('.menu').click(function (evt) { 52 evt.preventDefault(); 53 $this = $(this); 54 if ($this.next().hasClass('showMenu')) { 55 $this.next().removeClass('showMenu'); 56 $this.next().slideUp(); 57 } else { 58 $this.parent().parent().find('li .inner').removeClass('showMenu'); 59 $this.parent().parent().find('li .inner').slideUp(); 60 $this.next().toggleClass('showMenu'); 61 $this.next().slideToggle(); 62 } 63 }); 64</script> 65</body> 66</html>

CSS

1ul .inner { 2 display: none; 3}

わからない箇所があったときはコメントでお知らせください。

投稿2016/11/23 12:39

編集2016/11/23 12:43
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

htmlをそのまま流用するとこんな感じでは?

javascript

1$(function(){ 2 $('nav.left__nav > ul > li > ul').hide(); 3 $('nav.left__nav > ul > li').on('click',function(){ 4 var flg=$(this).find('> ul').css('display')=="none"; 5 if(flg) $(this).closest('ul').find('> li > ul').hide(); 6 $(this).find('> ul').toggle(flg); 7 }); 8});

投稿2016/11/24 00:37

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問