![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
色々と試してみましたがうまくいかず、ご教示頂けないでしょうか?
現在、以下のような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ランキング
-
アコーディオンメニューをブラ...
-
jQueryのアコーディオン一番目...
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
jQueryのblockUIをformのボタン...
-
jQueryでxmlの異なるタグ要素を...
-
変数にドットをいれることはか...
-
JavaScriptでtabindexの変更っ...
-
Javascriptの勉強初めました!
-
カンマ区切りのデータを配列に...
-
jQueryで追加した要素がマウス...
-
JSONをperlで受け取る方法
-
Ajax・jQueryでGETとPOSTする方法
-
メールを送信するボタンでOutlo...
-
二つのbxsliderをレスポンシブ...
-
多数のCPUを使い同期処理をした...
-
div要素に枠線を指定とページに...
-
jQueryでloadした部分に.jsが効...
-
エレメントとは何でしょうか
-
ページを遷移せずにデータ送信
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
階層別の組織図の自動作成について
-
jquery.validationEngine.js 添...
-
jquery-1.3.2⇒○ 1.6.4.⇒エラー
-
絞り込み検索の後にソートを追...
-
アコーディオンメニューが他に...
-
Rails3でのクリックされたボタ...
-
jqueryのプラグインについて
-
アコーディオンjquery
-
jqueryについてです
-
【JQuery】iframeのリンク先変...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
カンマ区切りのデータを配列に...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
おすすめ情報