色々と試してみましたがうまくいかず、ご教示頂けないでしょうか?
現在、以下のような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で質問しましょう!
似たような質問が見つかりました
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2023/05/23 16:28
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2023/01/23 17:13
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
階層別の組織図の自動作成について
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
jQueryのblockUIをformのボタン...
-
Python: TypeError
-
JavascriptからPHPへのAjax通信...
-
Ajax・jQueryでGET時にIE...
-
リンク付きの画像をクリックす...
-
readyStateが4にならない原因
-
同一ページ移動時ハンバーガー...
-
ページ内リンクで#などのアンカ...
-
JQuery Datepickerについて
-
jqueryのgetでJSPを呼び出したい
-
たくさんの経由地がある巡回ル...
-
座標のみでクリックする方法
-
jQuery toggle() 戻るで開いた...
-
タブをフリックでスライドでき...
-
ajax + PHPによるエラーの返し...
-
AJAXでのリロードに関して
-
IndexedDB を使ってファイルア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
階層別の組織図の自動作成について
-
Rails3でのクリックされたボタ...
-
jQueryのアコーディオン一番目...
-
アコーディオンメニューが他に...
-
アコーディオンメニューをブラ...
-
絞り込み検索の後にソートを追...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
JavaScriptでtabindexの変更っ...
-
Googleマップに複数のピンを立...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
readyStateが4にならない原因
-
AjaxでJSONを受信すると、文字...
-
変数にドットをいれることはか...
-
Selenium Basicの件
おすすめ情報