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

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

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

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

jQuery

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

HTML

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

Q&A

解決済

2回答

4168閲覧

クリックでid追加・削除する方法をご伝授ください。

satoshickkk

総合スコア53

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2017/11/16 03:15

HTMLでHPを作っておりまして
クリックでborder-bottom消える方法が出来なくこちらに質問させていただきます。
###実装したいこと
1.クリックする前のdtはborder-bottom:1px;
2.dtをクリックしddの要素が表示されたらdtのborder-bottomがnoneに
3.ddの要素をしまうため再びdtをクリックするとborder-bottom:1px;に戻る。

###分からないこと
下記が調べながら書いたコードです。

・クリックしたもの以外のdtにもid追加されるのでクリックしたものだけidを追加したい。
・アコーディオンを閉じようとdtをクリックしてもidが削除されずそのまま残っている。
※HTML、cssは別のファイルで作成してますが質問を見てもらいやすいように1つにまとめてます。

<!-- css --> <style> .accordion dd{ border-bottom: solid 1px; } #nonebor{ border-bottom: none; } </style> <!-- HTML --> <dl class="accordion"> <dt>アコーディオン1</dt> <dd> <p>アコーディオン1の内容1</p> <p>アコーディオン1の内容2</p> </dd> <dt>アコーディオン2</dt> <dd> <p>アコーディオン2の内容1</p> <p>アコーディオン2の内容2</p> </dd> </dl> <script> $('.accordion dd').hide(); $('.accordion dt').click(function(){ $(this).next('dd').slideToggle(); $(this).next('dd').siblings('dd').slideUp(); $(".accordion dt").attr('id', 'nonebor'); }); </script>

お力をお貸しください、よろしくお願いします。

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

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

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

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

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

guest

回答2

0

要素自体が動的に増える場合は別ですが、「既存の要素にIDを動的に振る」というのは、おそらく適当な手段ではありません。

ボーダーラインの制御もクラスで行って、クリックしたときには「全部クラスを外す→クリックしたものだけつけ直す」というように実装するのが楽です。

投稿2017/11/16 03:23

maisumakun

総合スコア145121

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

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

satoshickkk

2017/11/16 03:33

idが適切ではないのは勉強不足でした。 ありがとうございます、一度教えていただいた 「全部クラスを外す→クリックしたものだけつけ直す」でチャレンジしてみたいと思います。
guest

0

ベストアンサー

css

1.accordion dd.bor{ 2 border-bottom: solid 1px; 3}

調整

2パターンあると思いますが、どちらも違和感ありませんか?

javascript

1$(function(){ 2 $('.accordion dd').hide(); 3 $('.accordion dt').on('click',function(){ 4 var dd=$(this).next('dd'); 5 $.when(dd.slideToggle().siblings('dd').slideUp()).done(function(){ 6 dd.addClass('bor').siblings('dd').removeClass('bor'); 7 }); 8 }); 9});

javascript

1$(function(){ 2 $('.accordion dd').hide(); 3 $('.accordion dt').on('click',function(){ 4 $(this).next('dd').addClass('bor').slideToggle().siblings('dd').removeClass('bor').slideUp(); 5 }); 6}); 7

まとめ

javascript

1<style> 2.accordion dd.bor{ 3 border-bottom: solid 1px; 4} 5</style> 6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 7<script> 8$(function(){ 9 $('.accordion dd').hide(); 10 $('#menu1.accordion dd').addClass('bor').prev('dt').on('click',function(){; 11 $(this).next('dd').slideToggle().siblings('dd').slideUp(); 12 }); 13 $('#menu2.accordion dt').on('click',function(){ 14 $(this).next('dd').addClass('bor').slideToggle().siblings('dd').removeClass('bor').slideUp(); 15 }); 16 $('#menu3.accordion dt').on('click',function(){ 17 var dd=$(this).next('dd'); 18 $.when(dd.slideToggle().siblings('dd').slideUp()).done(function(){ 19 dd.addClass('bor').siblings('dd').removeClass('bor'); 20 }); 21 }); 22}); 23</script> 24<dl id="menu1" class="accordion"> 25 <dt>アコーディオン1</dt> 26 <dd> 27 <p>アコーディオン1の内容1</p> 28 <p>アコーディオン1の内容2</p> 29 </dd> 30 <dt>アコーディオン2</dt> 31 <dd> 32 <p>アコーディオン2の内容1</p> 33 <p>アコーディオン2の内容2</p> 34 </dd> 35 <dt>アコーディオン3</dt> 36 <dd> 37 <p>アコーディオン3の内容1</p> 38 <p>アコーディオン3の内容2</p> 39 </dd> 40</dl> 41<dl id="menu2" class="accordion"> 42 <dt>アコーディオン4</dt> 43 <dd> 44 <p>アコーディオン4の内容1</p> 45 <p>アコーディオン4の内容2</p> 46 </dd> 47 <dt>アコーディオン5</dt> 48 <dd> 49 <p>アコーディオン5の内容1</p> 50 <p>アコーディオン5の内容2</p> 51 </dd> 52 <dt>アコーディオン6</dt> 53 <dd> 54 <p>アコーディオン6の内容1</p> 55 <p>アコーディオン6の内容2</p> 56 </dd> 57</dl> 58<dl id="menu3" class="accordion"> 59 <dt>アコーディオン7</dt> 60 <dd> 61 <p>アコーディオン7の内容1</p> 62 <p>アコーディオン7の内容2</p> 63 </dd> 64 <dt>アコーディオン8</dt> 65 <dd> 66 <p>アコーディオン8の内容1</p> 67 <p>アコーディオン8の内容2</p> 68 </dd> 69 <dt>アコーディオン9</dt> 70 <dd> 71 <p>アコーディオン9の内容1</p> 72 <p>アコーディオン9の内容2</p> 73 </dd> 74</dl>

投稿2017/11/16 03:43

編集2017/11/16 06:57
yambejp

総合スコア114572

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

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

satoshickkk

2017/11/16 04:27

yambejp様回答ありがとうございます。 この通りに記載しましたら無事にborderが消えました。 ただ、2回目のクリックをした場合に要素がしまわれる前にborder-bottomが表示されていしまい 一瞬ですがborderが2本あるように見えてしまいます。 「borderを遅れて表示する」や 「dd要素をしまった後にborder-bottomを表示する」などはできませんでしょうか? もしお分かりでしたら返信いただけると幸いです。
yambejp

2017/11/16 05:15

borderが1本になるように調整しましたが、あまりよい結果には見えませんが・・・
satoshickkk

2017/11/16 06:35

何度もありがとうございます、感謝です。 なぜか分かりませんがクリックしても一番最初に頂いたコードでは消えていたborderが表示され 2本表示される状態になっております。 最初に頂いたコードでレイアウト変えて使用させて頂きます。 もう一つ質問なのですが アコーディオン1をクリックした後にアコーディオン1をしめずにアコーディオン2をクリックしますと アコーディオン1のborderが消えたままになるのは閉めた後のクラス指定をしていないからでしょうか? 何度も申し訳ありませんがお時間があれお助け下さい。
yambejp

2017/11/16 07:15 編集

ちょっと状況がわからないです。 ie11,edge,firefox56,chromeあたりだと想定通り動いているようですが・・・ 2本表示していいパターンはddが消える時点でかってに消えるので removeClassしたりtoggleClassする意味がなかったですね 3パターン列記しておきましたので、コピペして動作確認してみてください (古いIEだと動きがびみょうだったので若干ブラウザ依存があるかも・・・)
satoshickkk

2017/11/16 07:08

何度も丁寧に教えてくださって本当にありがとうございます。 自分のミスでした…、コード見直し教えていただいた通りに記載したところ無事に理想通りの動きをしました。 いろいろな方法を記載していただいたのでうまく自分で活用し無駄のないように使用させていただきます。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問