BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] How can I expand and collapse a <div> using javascript?

2023-01-13 03:43:22

Question

I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows: 

<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>

So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"

The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.

The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.

以下がその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> セクションに

どのように解決するのですか？

さて、ここで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/

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します