
色々と試してみましたがうまくいかず、ご教示頂けないでしょうか?
現在、以下のようなhtmlになっております。
<dl id="learning-method">
<dt>一番目</dt>
<dd>一番目展開部分</dd>
<dt>二番目</dt>
<dd>二番目展開部分</dd>
<dt>三番目</dt>
<dd>三番目展開部分</dd>
</dl>
jQueryは以下です。
<script type="text/javascript">
$(function() {
$('#learning-method dd').hide();
$('#learning-method dt').click(function() {
$(this).toggleClass('active');
$(this).next().slideToggle();
});
});
</script>
最初から一番目のddだけ開いておきたいのですが、jQueryをどのように記述すればよいでしょうか?
dtをクリックすると他と同じように閉じるようにしたいです。
よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
No1です。
よく見たら、クラスactiveもつけっぱなしのようですが、なんだか違うのではないかなぁ…
開いているdtだけにactiveクラスが設定されるようにするおつもりなのではないかと勝手に推測。
想像するところ、こんな感じではいかがかと。
$(function() {
$('#learning-method dd').hide();
let tg = (s)=>{ $(s).toggleClass('active').next().slideToggle(); };
$('#learning-method dt').click(function() {
if(!$(this).hasClass('active')) tg('#learning-method dt.active');
tg(this);
}).eq(0).click();
});
No.1
- 回答日時:
こんばんは
>最初から一番目のddだけ開いておきたいのですが
今、環境がないので確認はしていませんが、方法はいろいろあると思いますけれど、イベントをセットした後で、最初のdt要素をクリックしておくとかではいかがでしょうか?
~~ .eq(0).click()
とか。
>dtをクリックすると他と同じように閉じるようにしたいです。
CSSが不明なのではっきりしない部分がありますが、ご提示のスクリプトには直接閉じる記述が見当たらないようですけれど、現状でクリック時に閉じるようになっているのでしょうか?
もしも、現状でも閉じないのであれば、イベント処理内でdd要素をまとめて閉じてから、クリックされたものだけ開くようにすればよろしいかと。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jsonテキストデータの並び替え...
-
jsで質問です。 ボタンが二つ存...
-
スマホ上で、左右スワイプで次...
-
ラジオボタンを複数選択したと...
-
Outlookのアカウントがあるとメ...
-
変数宣言と初期値代入の場所に...
-
Adobe acrobat proでフォームを...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
ボタンを押したあとに画像を表...
-
Cookieに保存されない
-
画面遷移を行わずに同一ページ...
-
インスタグラムのapiを利用して...
-
タグを教えてください。
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字列の操作
-
jQuery 複数のライブラリーを表示
-
jQueryのアコーディオン一番目...
-
階層別の組織図の自動作成について
-
【JQuery】iframeのリンク先変...
-
jqueryについて、$("+dd",this)...
-
jquery.validationEngine.js 添...
-
jqueryスライドショーを作成
-
アコーディオンメニューをブラ...
-
Javascriptを使ってQRコード読...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
JavascriptからPHPへのAjax通信...
-
JavaScriptでtabindexの変更っ...
-
インラインフレームを自動更新...
-
jQuery を外部ファイルから呼び...
-
FullCalendar の複数月表示につ...
-
パソコンで動くjavascriptがス...
-
Ajaxで文字化けしてしまいます
-
複数対応できるチェックボック...
おすすめ情報