質問編集履歴

2 コードブロック追記

amaotosarasa

amaotosarasa score 14

2017/05/26 19:23  投稿

アコーディオンパネルについて…
現在jQueryについて勉強しています。
アコーディオンパネルのコードを本で見たのですが、いまいちよくわかりません。
```html,jQuery
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>アコーディオン</title>
   <link rel="stylesheet" href="style.css">
   <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
   <script>
       $(function(){
           $("dd:not(:first)").css("display","none");
               $("dl dt").click(function(){
                   if($("+dd",this).css("display")=="none"){
                       $("dd").slideUp("slow");
                       $("+dd",this).slideDown("slow");
                   }
           });
       });
   </script>
</head>
<body>
   <dl>
       <dt>step.1</dt>
       <dd>テキスト1</dd>
       <dt>step.2</dt>
       <dd>テキスト2</dd>
       <dt>step.3</dt>
       <dd>テキスト3</dd>
   </dl>
</body>
</html>
```
css
```css
@carset "utf-8";
dl{
   width: 500px;
}
dt{
   line-height: 35px;
   font-size: 16px;
   font-weight: bold;
   background-color: #ddf;
}
dd{
   height: 300px;
   margin: 0;
   padding: 0;
   background-color: #ccc;
}
```  
ifの文からの解説と+dd,thisについて、意味が分かる方がいれば回答をお願い致します。
  • jQuery

    11732 questions

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

1 コードを書き直しました

amaotosarasa

amaotosarasa score 14

2017/05/26 19:12  投稿

アコーディオンパネルについて…
現在jQueryについて勉強しています。
アコーディオンパネルのコードを本で見たのですが、いまいちよくわかりません。
$(function(){           
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
```html,jQuery
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>アコーディオン</title>
   <link rel="stylesheet" href="style.css">
   <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
   <script>
       $(function(){
           $("dd:not(:first)").css("display","none");
               $("dl dt").click(function(){
                   if($("+dd",this).css("display")=="none"){
                       $("dd").slideUp("slow");
                       $("+dd",this).slideDown("slow");
                   }
           });
       });
   </script>
</head>
<body>
   <dl>
       <dt>step.1</dt>
       <dd>テキスト1</dd>
       <dt>step.2</dt>
       <dd>テキスト2</dd>
       <dt>step.3</dt>
       <dd>テキスト3</dd>
   </dl>
</body>
</html>
```
css
@carset "utf-8";
dl{
   width: 500px;
}
dt{
   line-height: 35px;
   font-size: 16px;
   font-weight: bold;
   background-color: #ddf;
}
dd{
   height: 300px;
   margin: 0;
   padding: 0;
   background-color: #ccc;
}
ifの文からの解説と+dd,thisについて、意味が分かる方がいれば回答をお願い致します。
  • jQuery

    11732 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る