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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2494閲覧

jQueryのclickイベントで他の要素をクリックしたら今表示してる要素を隠したいです

annin

総合スコア10

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/03 07:23

前回も同じような質問をして申し訳ないのですが
例えば#simple-btnをclickした時#simple-innerが表示されていなくてに#input-innerの要素が表示されている場合
#simple-btnをclickした時#simple-innerを出して#input-innerを隠したいです。他の要素も同様に機能させたいです。

HTML

1<!-- simple --> 2 <div id="simple-id" class="item"> 3 <a href="#" class="simple-btn" name="inner">簡略化</a> 4 </div> 5 <div class="icon-inner" id="simple-inner"> 6 <div class="cp_cssslider"> 7 <div class="cp_slidewrapper"> 8 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0008.jpg"></div> 9 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0007.jpg"></div> 10 </div> 11 </div> 12 </div> 13 14 15 <!-- input --> 16 <div class="item" id="input-id"> 17 <a href="#" class="input-btn" name="inner" id="input">吸収力</a> 18 </div> 19 <div class="icon-inner" id="input-inner"> 20 <div class="cp_cssslider"> 21 <div class="cp_slidewrapper"> 22 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0005.jpg"></div> 23 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0004.jpg"></div> 24 </div> 25 </div> 26 </div> 27 28 <!-- time --> 29 <div class="item" id="time-id"> 30 <a href="#" class="time-btn" name="inner" id="time">時短化</a> 31 </div> 32 <div class="icon-inner" id="time-inner"> 33 <div class="cp_cssslider"> 34 <div class="cp_slidewrapper"> 35 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0002.jpg"></div> 36 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0001.jpg"></div> 37 </div> 38 </div> 39 </div> 40 41 42 <!-- global --> 43 <div class="item" id="global-id"> 44 <a href="#" class="global-btn" name="inner" id="global">グローバル化</a> 45 </div> 46 <div class="icon-inner" id="global-inner"> 47 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0012.jpg"></div> 48 </div> 49 50 51 <!-- anony --> 52 <div class="item" id="anony-id"> 53 <a href="#" class="anony-btn" name="inner" id="anony">匿名性</a> 54 </div> 55 <div class="icon-inner" id="anony-inner"> 56 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0011.jpg"></div> 57 </div> 58 59 <!-- share --> 60 <div class="item" id="share-id"> 61 <a href="#" class="share-btn" name="inner" id="share">共有</a> 62 </div> 63 <div class="icon-inner" id="share-inner"> 64 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0013.jpg"></div> 65 </div> 66 </ul> 67 </div>

jQuery

1$('#simple-btn,#input-btn,#time-btn,#global-btn,#anony-btn,#share-btn').on('click',function(){ 2 $('#simple-btn,#input-btn,#time-btn,#global-btn,#anony-btn,#share-btn:not(#slide'+$(this).attr('id').substr(-3)+')').hide(); 3 $('#simple-btn,#input-btn,#time-btn,#global-btn,#anony-btn,#share-btn'+$(this).attr('id').substr(-3)).toggle(); 4 })

css

1 2.simple-btn,.input-btn,.time-btn,.global-btn,.anony-btn,.share-btn{ 3 width: 20%; 4 display: inline-block; 5 padding: 1em 1em; 6 text-decoration: none; 7 background: #fafafa; 8 font-size: 30px; 9 font-weight: bold; 10 text-align: center; 11} 12.simple-btn,.input-btn,.time-btn,.global-btn,.anony-btn,.share-btn:active { 13 box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); 14 transform: translateY(2px); 15} 16 17.simple-btn{ 18 border-left: solid 20px #da302c;/*左線*/ 19 color: #da302c;/*文字色*/ 20} 21 22.input-btn{ 23 border-left: solid 20px #3a5fe9;/*左線*/ 24 color: #3a5fe9;/*文字色*/ 25} 26 27.time-btn{ 28 border-left: solid 20px #d8cd47;/*左線*/ 29 color: #d8cd47;/*文字色*/ 30} 31 32.global-btn{ 33 border-left: solid 20px #50d64a;/*左線*/ 34 color: #50d64a;/*文字色*/ 35} 36 37.anony-btn{ 38 border-left: solid 20px #964ad6;/*左線*/ 39 color: #964ad6;/*文字色*/ 40} 41 42.share-btn{ 43 border-left: solid 20px #e4892f;/*左線*/ 44 color: #e4892f;/*文字色*/ 45} 46 47.icon-inner{ 48 display: none; 49} 50 51.icon-inner img{ 52 width: 100%; 53}

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

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

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

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

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

m.ts10806

2018/10/03 09:28

前の質問の回答で本当に解決したのでしょうか?「解決済み」とされていますが、そのコードが活かされている感じがほとんどしません。コードがちゃんと理解できていないのならそこを突っ込んで自身で理解できるまで確認すべきかと思います。(似たようなタイトルで似たような質問が続くと回答が得られにくくなります)
guest

回答1

0

こんな感じですかね?

javascript

1$(function(){ 2 $('.item').on('click',function(){ 3 $(this).next('.icon-inner').toggle().end().siblings('.item').next('.icon-inner').hide(); 4 }).next('.icon-inner').hide(); 5});

.itemのアンカーをクリックしたときの方がいいでしょうか?

投稿2018/10/03 07:39

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問