jQueryを使用したテキストの展開または折りたたみ

jQueryを使用してWebページ上のテキストを展開/折りたたむ方法を学習しようとしていますが、「a href」リンクを使用してこれを行う方法がわかりません。私は、 "Show more"リンクをクリックしてテキストを拡大または縮小したいと思います。私はあなたがこれを行うには、非表示のクラスを追加または削除する必要があることを知っていますが、これを達成するためにトグルクラスをどのように正確に使うのですか？jQueryを使用したテキストの展開または折りたたみ

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    font-size: 87.5%; 
 
    width: 650px; 
 
    margin: 0 auto; 
 
    padding: 15px 25px; \t 
 
    border: 3px solid blue; 
 
} 
 
h1 { 
 
    font-size: 150%; 
 
} 
 
h2 { 
 
    font-size: 120%; 
 
    padding: .25em 0 .25em 25px; 
 
} 
 
div.hide { 
 
    display: none; 
 
} 
 
ul { 
 
    padding-left: 45px; 
 
} 
 
li { 
 
    padding-bottom: .4em; 
 
} 
 
p, a { 
 
    padding-bottom: .4em; 
 
    padding-left: 25px; 
 
} 
 
a, a:focus, a:hover { 
 
    color: blue; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="subset_expansion.js"></script> \t 
 
</head> 
 

 
<body> 
 
    <main id="jdom"> 
 
    <h1>Expanding and Collapsing messages</h1> 
 
    <h2>Message 1</h2> 
 
    <div> 
 
     <p>Click the link below to expand this message</p> 
 
    </div> 
 
    <div class="hide"> 
 
     <p>Hello!</p> 
 
    </div> 
 
    <a href="#">Show more</a> \t \t \t 
 

 
    <h2>Message 2</h2> 
 
    <div> 
 
     <p>Click the link below to expand this message</p> 
 
    </div> 
 
    <div class="hide"> 
 
     <p>BOOP</p> 
 
    </div> 
 
    <a href="#">Show more</a> 
 

 
    <h2>Message 3</h2> 
 
    <div> 
 
     <p>Click the link below to expance this message</p> 
 
    </div> 
 
    <div class="hide"> 
 
     <p>Things to do when you're bored</p> 
 
     <ul> 
 
     <li>Go for a walk</li> 
 
     <li>Try your hand at painting.</li> 
 
     <li>Listen to music</li> 
 
     </ul> 
 
    </div> 
 
    <a href="#">Show more</a> \t 
 
    </main> 
 
</body> 
 
</html>

出典

2017-04-21 Anonymous

あなたのjsコードはどこですか？ –

コードエディタポップアップに「整頓」ボタンがあります。それを使用してください。 – Rajesh

Chek my codeスニペット。私は靴にコードを提供しました。 –

を行ったようshow-moreのようなリンクにクラスを追加し、親のdivとメッセージのdivをラップ

$(document).ready(function(){ 
 

 
    $('a').on("click", function(){ 
 
    $(this).prev("div").toggleClass('hide'); 
 
    if($(this).text() == 'Show more') 
 
    { 
 
     $(this).text('Show Less'); 
 
    } 
 
    else 
 
    { 
 
     $(this).text('Show more'); 
 
    } 
 
    }); 
 
});

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
body { 
 
\t font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    font-size: 87.5%; 
 
\t width: 650px; 
 
\t margin: 0 auto; 
 
\t padding: 15px 25px; \t 
 
\t border: 3px solid blue; 
 
} 
 
h1 { 
 
\t font-size: 150%; 
 
} 
 
h2 { 
 
\t font-size: 120%; 
 
\t padding: .25em 0 .25em 25px; 
 
} 
 
div.hide { 
 
\t display: none; 
 
} 
 
ul { 
 
\t padding-left: 45px; 
 
} 
 
li { 
 
\t padding-bottom: .4em; 
 
} 
 
p, a { 
 
\t padding-bottom: .4em; 
 
\t padding-left: 25px; 
 
} 
 
a, a:focus, a:hover { 
 
\t color: blue; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
\t <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> \t 
 
</head> 
 

 
<body> 
 
\t <main id="jdom"> 
 
\t \t <h1>Expanding and Collapsing messages</h1> 
 
\t \t <h2>Message 1</h2> 
 
\t \t <div> 
 
      <p>Click the link below to expand this message</p> 
 
     </div> 
 
     <div class="hide"> 
 
      <p>Hello!</p> 
 
\t \t </div> 
 
\t \t <a href="javasctipt:void();">Show more</a> \t \t \t 
 
\t \t 
 
\t \t <h2>Message 2</h2> 
 
\t \t <div> 
 
      <p>Click the link below to expand this message</p> 
 
     </div> 
 
     <div class="hide"> 
 
\t \t \t <p>BOOP</p> 
 
\t \t </div> 
 
\t \t <a href="javasctipt:void();">Show more</a> 
 
\t \t \t 
 
\t \t <h2>Message 3</h2> 
 
\t \t <div> 
 
      <p>Click the link below to expance this message</p> 
 
\t \t </div> 
 
\t \t <div class="hide"> 
 
\t \t \t <p>Things to do when you're bored</p> 
 
\t \t \t <ul> 
 
\t \t \t \t <li>Go for a walk</li> 
 
\t \t \t \t <li>Try your hand at painting.</li> 
 
\t \t \t \t <li>Listen to music</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <a href="javasctipt:void();">Show more</a> \t \t \t \t 
 
\t 
 
\t </main> 
 
</body> 
 
</html>

出典

2017-04-21 05:32:01

こんにちは@MenjiXo 上記の編集済みコードを確認してください詳細を表示するための変更テキストを追加して表示しますless –

以下のスニペットを試してみてください。要件に合わせて調整してください。 data-show属性タグを追加し、次にonclickに関数を呼び出し、データを渡して切り替えます。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    font-size: 87.5%; 
 
    width: 650px; 
 
    margin: 0 auto; 
 
    padding: 15px 25px; \t 
 
    border: 3px solid blue; 
 
} 
 
h1 { 
 
    font-size: 150%; 
 
} 
 
h2 { 
 
    font-size: 120%; 
 
    padding: .25em 0 .25em 25px; 
 
} 
 
div.hide { 
 
    display: none; 
 
} 
 
ul { 
 
    padding-left: 45px; 
 
} 
 
li { 
 
    padding-bottom: .4em; 
 
} 
 
p, a { 
 
    padding-bottom: .4em; 
 
    padding-left: 25px; 
 
} 
 
a, a:focus, a:hover { 
 
    color: blue; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="subset_expansion.js"></script> \t 
 
</head> 
 

 
<body> 
 
    <main id="jdom"> 
 
    <h1>Expanding and Collapsing messages</h1> 
 
    <h2>Message 1</h2> 
 
    <div> 
 
     <p>Click the link below to expand this message</p> 
 
    </div> 
 
    <div class="hide" data-show="link"> 
 
     <p>Hello!</p> 
 
    </div> 
 
    <a href="#" onclick='$("[data-show=link]").toggle()'>Show more</a> \t \t \t 
 

 
    <h2>Message 2</h2> 
 
    <div> 
 
     <p>Click the link below to expand this message</p> 
 
    </div> 
 
    <div class="hide"> 
 
     <p>BOOP</p> 
 
    </div> 
 
    <a href="#">Show more</a> 
 

 
    <h2>Message 3</h2> 
 
    <div> 
 
     <p>Click the link below to expance this message</p> 
 
    </div> 
 
    <div class="hide"> 
 
     <p>Things to do when you're bored</p> 
 
     <ul> 
 
     <li>Go for a walk</li> 
 
     <li>Try your hand at painting.</li> 
 
     <li>Listen to music</li> 
 
     </ul> 
 
    </div> 
 
    <a href="#">Show more</a> \t \t \t \t 
 

 
    </main> 
 
</body> 
 
</html>

出典

2017-04-21 05:16:19

インラインクリックハンドラを書くのは悪い習慣です。 – Rajesh

@Rajeshはい。しかし、私は彼に理解させるためにスニペットを与えました。 '

$（ "a.show-以上"）（ "クリック"、関数（）{

$(this).text(function(i, v){ 
    return v === 'Show More' ? 'Show Less' : 'Show More' 
});

}）で。

出典

2017-05-30 05:48:00

jQueryを使用したテキストの展開または折りたたみ

答えて

関連する問題