JavaScriptを使用して<div>を展開および縮小するにはどうすればよいですか？

95

サイトにリストを作成しました。このリストは、私のデータベースからの情報で構築されるforeachループによって作成されます。各アイテムは異なるセクションを持つコンテナなので、これは1、2、3 ...などのリストではありません。繰り返しセクションを情報とともにリストしています。各セクションには、サブセクションがあります。一般的なビルドは次のとおりです。

<div>
    <fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
    <legend class="majorpointslegend">Expand</legend>
    <div style="display:none" >
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

だから、私はonclick = "majorpointsexpand（$（this）.find（ 'legend'）。innerHTML）"で関数を呼び出そうとしています

私が操作しようとしているdivはデフォルトでstyle = "display：none"であり、JavaScriptを使用してクリックすると表示されるようにしたいと考えています。

"$（this）.find（ 'legend'）。innerHTML"は、関数の引数としてこの場合は "Expand"を渡そうとしています。

これがjavascriptです：

function majorpointsexpand(expand)
    {
        if (expand == "Expand")
            {
                document.write.$(this).find('div').style = "display:inherit";
                document.write.$(this).find('legend').innerHTML = "Collapse";
            }
        else
            {
                document.write.$(this).find('div').style = "display:none";
                document.write.$(this).find('legend').innerHTML = "Expand";
            }
    }

私の問題は構文にあるとほぼ100％確信しており、JavaScriptがどのように機能するかについてはあまり理解していません。

私はドキュメントにjQueryをリンクしています：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

で<head></head>セクション。

javascript  jquery 
— ライアン・モーテンセン
ソース
2
あなたが達成しようとしているのはアコーディオンjqueryui.com/accordion
— Marc
1
$ thisは、関数が内部でトリガーされるHTML要素に「関連して」言っているところです。
— Ryan Mortensen 2013
1
@hungerpain-質問者はjQueryの初心者で、かっこを忘れただけかもしれません$(this)。お役に立てれば。
— jmort253 2013
2
まずjQueryについてもっと学ぶべきだと思います。どうやらjQueryとJavaScriptの違いについてはあまり知らないようです
— tom10271
1
@aokaddaocあなたは絶対的に正しかった;）
— ライアン・モーテンセン

回答:

181

さて、ここに2つのオプションがあります：

  1. jQuery UIのアコーディオンを使用します-その素晴らしく、簡単で高速です。詳細はこちら
  2. または、自分でこれを実行したい場合は、fieldset（これを意味上これに使用するのは意味的に適切ではありません）を削除して、自分で構造を作成できます。

その方法は次のとおりです。次のようなHTML構造を作成します。

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

このCSSの場合：（これは.content、ページが読み込まれるときにものを非表示にするためのものです。

.container .content {
    display: none;
    padding : 5px;
}

次に、jQueryを使用clickして、ヘッダーのイベントを記述します。

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

ここにデモがあります：http : //jsfiddle.net/hungerpain/eK8X5/7/

— クリシュウェーダー
ソース
9
これは、ページに複数のDIV要素がある場合に問題を解決するため、+ 1します。つまり、クリックしたヘッダー内のコンテンツをターゲットにしているため、これは適切にスケーリングされます。
— jmort253 2013
2
フィールドセットは必須ではありません。私はそれを取り除き、境界線を使用します。クリックしたヘッダーに対して展開するdivを選択するため、これは優れています。これは、ユーザー設定やその他の要因に応じて、リストされたアイテムの数が異なる場合があるため重要です。
— Ryan Mortensen 2013
1
@Unipartisandevこれを見てください：jsfiddle.net/hungerpain/476Nq本格的な例:)
— クリシュウェーダー2013
私は本当に助けに感謝します。サイトのその他の部分では、アコーディオンを使用する必要があることは間違いありませんが、これは特定の事柄がすべてか何も表示されていない例です。まだ問題があります。私のjQueryは古く、読み込まれていません。これは修正されましたが、まだ機能していません。私はそれを良い時間の間いじりました、私はそれで寝ます。多分明日それは私を襲います。
— Ryan Mortensen 2013
素晴らしい、ありがとう。多くの時間を節約しました！
— バジルムーサ2014
21

どのように：

jQuery：

$('.majorpoints').click(function(){
    $(this).find('.hider').toggle();
});

HTML

<div>
  <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hider" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div>

フィドル

このようにして、クリックイベントを.majorpointsクラスにバインドします。毎回HTMLでクリックする必要はありません。

— raam86
ソース
こんにちはraam86、私はこれをさらに一歩進め、idの代わりにクラスを使用してdivで.findを実行します。質問者がページ上にこれらのフィールドセットのいくつかを持っている場合、彼はクリックされた特定のフィールドセットに関連するもののハイダーをターゲットにしたいと思うでしょう。お役に立てれば！:)たとえば、.closestを使用して親divへの参照を取得し、.findを使用して代わりにclass = "hider"でdivを見つけることができます。
— jmort253 2013
1
午前3時ですが、jsFiddleでまだidを使用していることに気づきました。W3C仕様では各IDは一意でなければならないため、これにより未定義の動作が発生する可能性があります。ハイダーをクラスに変更すると、他のブラウザーでのバグや奇妙な原因不明の動作の影響を受けにくくなります。お役に立てれば！
— jmort253 2013
実際には$（ '。majorpointslegend'）。click（function（）{$（this）.parent（）。find（ '。hider'）。toggle（）;}）;である必要があります。または、フィールドセット内の任意の場所をクリックすると、折りたたまれます。
— Awatatah 2017
7

したがって、まず第一に、あなたのJavascriptはjQueryさえ使用していません。これを行うにはいくつかの方法があります。例えば：

最初の方法では、jQuery toggleメソッドを使用します。

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>

<script>  
    $('.expandContent').click(function(){
        $('.showMe').toggle();
    });
</script>

jsFiddle：http ://jsfiddle.net/pM3DF/

別の方法は、jQuery showメソッドを使用することです。

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>

<script>
    $('.expandContent').click(function(){
        $('.showMe').show();
    });
</script>

jsFiddle：http ://jsfiddle.net/Q2wfM/

しかし、3番目の方法はslideToggle、いくつかの効果を可能にするjQuery のメソッドを使用することです。$('#showMe').slideToggle('slow');隠されたdivをゆっくり表示するようなもの。

— マイケル・ホーキンス
ソース
ページにこれらのshowMe要素が複数あるとしたら、彼はforループを使用してこれらのリストを作成しているため、class = "showMe"をターゲティングすると、その要素の最初のインスタンスにのみ影響することに注意してください。私の提案は、クリックされたものに関連してshowMe要素を参照することです。次に、これは良い解決策になります。お役に立てれば！:)
— jmort253 2013
そうですが、彼はループを使用して、<li>divではなく一連の要素でリストを作成しています。どちらの方法でも、要素IDを使用して非表示にすることができます。
— マイケルホーキンス
あなたはサブセクションについて考えており、これらの多くがあることを忘れています。各セクションには、サブセクションの li要素が入力されます。「このリストは、私のデータベースからの情報を使用して構築するforeachループによって作成されます。各アイテムは、異なるセクションを持つコンテナーであるため、1、2、3などのリストではありません。繰り返しセクションを情報とともにリストしています各セクションには、サブセクションがあります。」要するに、彼はセクションが1つだけあることを示しただけでした。
— jmort253 2013
6

ここに多くの問題

私はあなたのために働くフィドルを設定しました：http : //jsfiddle.net/w9kSU/

$('.majorpointslegend').click(function(){
    if($(this).text()=='Expand'){
        $('#mylist').show();
        $(this).text('Colapse');
    }else{
        $('#mylist').hide();
        $(this).text('Expand');
    }
});
— デビッド・リン
ソース
5

リンクをクリックしてパネル/ divを展開したり折りたたんだりするときに呼び出されるこの単純なJavascriptメソッドを見てみましょう。

<script language="javascript"> 
function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
            ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
} 
</script>

div IDを渡すと、「なし」または「ブロック」の表示が切り替わります。

上のオリジナルソースsnip2code - HTMLでdiv要素を折りたたむ方法

— マイク・スカットーニ
ソース
3

jqueryを試してください、

  <div>
        <a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/>
        <legend class="majorpointslegend">Expand</legend>
        <div id="data" style="display:none" >
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


function majorpointsexpand(expand)
    {
        if (expand == "Expand")
            {
                $('#data').css("display","inherit");
                $(".majorpointslegend").html("Collapse");
            }
        else
            {
                $('#data').css("display","none");
                $(".majorpointslegend").html("Expand");
            }
    }
— Nmanandhan
ソース
3

ここに私の説明のアニメーションの例があります。

<html>
  <head>
    <style>
      .staff {            margin:10px 0;}
      .staff-block{       float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
      .staff-title{       font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;}
      .staff-name {       font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
      .staff-name:hover { background-color: silver !important; cursor: pointer;}
      .staff-section {    display:inline-block; padding-left: 10px;}
      .staff-desc {       font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
      .staff-desc p {     text-align: justify; margin-top: 5px;}
      .staff-desc img {   margin: 5px 10px 5px 5px; float:left; height: 185px; }
    </style>
  </head>
<body>
<!-- START STAFF SECTION -->
<div class="staff">
  <div class="staff-block">
    <div  class="staff-title">Staff</div>
    <div class="staff-section">
        <div class="staff-name">Maria Beavis</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
        </div>
        <div class="staff-name">Diana Smitt</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
        </div>
        <div class="staff-name">Mike Ford</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
        </div>
    </div>
  </div>

  <div class="staff-block">
    <div  class="staff-title">Technical Advisors</div>
    <div class="staff-section">
        <div class="staff-name">TA Elvira Bett</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p>
        </div>
        <div class="staff-name">TA Sonya Rosman</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p>
        </div>
        <div class="staff-name">TA Tim Herson</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Tim joined his father&#8217;s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p>
        </div>
    </div>
  </div>
</div>
<!-- STOP STAFF SECTION -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script language="javascript"><!--
//<![CDATA[
$('.staff-name').hover(function() {
    $(this).toggleClass('hover');
});
var lastItem;
    $('.staff-name').click(function(currentItem) {
        var currentItem = $(this);
      if ($(this).next().height() == 0) {
          $(lastItem).css({'font-weight':'normal'});
          $(lastItem).next().animate({height: '0px'},400,'swing');
          $(this).css({'font-weight':'bold'});
          $(this).next().animate({height: '300px',opacity: 1},400,'swing');
      } else {
          $(this).css({'font-weight':'normal'});
          $(this).next().animate({height: '0px',opacity: 1},400,'swing');
      }
      lastItem = $(this);
    });
//]]>
--></script>

</body></html>

フィドル

— インタクト
ソース
3

toggle() jQuery関数を見てください。

http://api.jquery.com/toggle/

また、innerHTML jQuery関数は.html()です。

— これは愛ですか
ソース
1
こんにちは、Stack Overflowへようこそ。答えがより完全になるように、例を示す必要があります。リンクが壊れたとしても、あなたの答えは将来の訪問者にとってまだ役に立ちます。幸運を！:)
— jmort253 2013
編集して例を追加するか、コメントとして追加してください。ありがとう。
— JGallardo
2

ページにjQueryがあるので、そのonclick属性とmajorpointsexpand関数を削除できます。次のスクリプトをページの下部、またはできれば外部の.jsファイルに追加します。

$(function(){

  $('.majorpointslegend').click(function(){
    $(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

このソリューションはそのままHTMLで動作するはずですが、実際には非常に堅牢な答えではありません。fieldsetレイアウトを変更すると、壊れる可能性があります。そのclassような隠されたdivに属性を配置して、class="majorpointsdetail"代わりに次のコードを使用することをお勧めします。

$(function(){

  $('.majorpoints').on('click', '.majorpointslegend', function(event){
    $(event.currentTarget).find('.majorpointsdetail').toggle();
    $(this).text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

Obs：</fieldset>質問に終了タグがないため、非表示のdivがフィールドセット内にあると想定しています。

— セルジオペレイラ
ソース
あなたは正しいです。終了フィールドセットがありますが、質問ではそれを逃しました。それは、内側のクロージングの直後</ div>と外側のクロージングの直前</ div>
— Ryan Mortensen 2013
1

たとえば、折りたたみ可能なデータロールを使用した場合

    <div id="selector" data-role="collapsible" data-collapsed="true">
    html......
    </div>

次に、展開されたdivを閉じます

    $("#selector").collapsible().collapsible("collapse");
— アティフフセイン
ソース
1

Jed FosterのReadmore.jsをチェックしてください。ライブラリーを。

使い方は簡単です：

$(document).ready(function() {
  $('article').readmore({collapsedHeight: 100});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script>

<article>
  <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>

  <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>

  <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>

  <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
</article>
スニペットを展開

ウィジェットを構成するために使用できるオプションは次のとおりです。

{
  speed: 100,
  collapsedHeight: 200,
  heightMargin: 16,
  moreLink: '<a href="#">Read More</a>',
  lessLink: '<a href="#">Close</a>',
  embedCSS: true,
  blockCSS: 'display: block; width: 100%;',
  startOpen: false,

  // callbacks
  blockProcessed: function() {},
  beforeToggle: function() {},
  afterToggle: function() {}
},
スニペットを展開

次のように使用できます：

$('article').readmore({
  collapsedHeight: 100,
  moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>',
});
スニペットを展開

お役に立てば幸いです。

— ハイターアルトマン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.