Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、スクリプトは省略せず書いてください。提示されているコードだけではエラーで動かないはずです。また、HTMLも提示ください。
現在jQueryについて勉強しています。
アコーディオンパネルのコードを本で見たのですが、いまいちよくわかりません。
html,jQuery
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>アコーディオン</title> 7 <link rel="stylesheet" href="style.css"> 8 <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> 9 <script> 10 $(function(){ 11 $("dd:not(:first)").css("display","none"); 12 $("dl dt").click(function(){ 13 if($("+dd",this).css("display")=="none"){ 14 $("dd").slideUp("slow"); 15 $("+dd",this).slideDown("slow"); 16 } 17 }); 18 }); 19 </script> 20</head> 21<body> 22 <dl> 23 <dt>step.1</dt> 24 <dd>テキスト1</dd> 25 <dt>step.2</dt> 26 <dd>テキスト2</dd> 27 <dt>step.3</dt> 28 <dd>テキスト3</dd> 29 30 </dl> 31</body> 32</html> 33
css
1@carset "utf-8"; 2 3dl{ 4 width: 500px; 5} 6 7dt{ 8 line-height: 35px; 9 font-size: 16px; 10 font-weight: bold; 11 background-color: #ddf; 12} 13dd{ 14 height: 300px; 15 margin: 0; 16 padding: 0; 17 background-color: #ccc; 18}
ifの文からの解説と+dd,thisについて、意味が分かる方がいれば回答をお願い致します。
回答1件
0
ベストアンサー
+は隣接セレクタで、this はコンテキストを渡しています。提示のコードの場合 this はクリックした dt なので、$("+dd",this) は「クリックしたdtの隣（次）にあるdd」を取得しています。
【隣接セレクタ (E + F)｜セレクタ｜CSS HappyLife ZERO】
http://zero.css-happylife.com/selectors/adjacent_sibling_combinators.shtml
【jQuery(expression, context) - jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/
context
Element,jQuery 検索対象。DOM ElementやDocument,jQueryオブジェクトなど
投稿2017/05/26 10:25
総合スコア69398
あなたの回答
tips
プレビュー
