1

クリックすると展開され、もう一度クリックすると折りたたまれます...既に展開されている場合は非表示にし、既に折りたたまれている場合は表示します。

以下はこれまでのコードです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collapsible Message Panels</title>
        <style type="text/css">
        *
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        #content
        {
            width: 200px;
            height: 100px;
            margin: 20px auto;
            padding: 20px;
            border: 1px dotted #999999;
            overflow: hidden;
            text-align: justify;
        }

    </style>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // Hide the "view" div.
            $('one').hide();
            $('second').hide();
            // Watch for clicks on the "slide" link.
            $('div.slide').click(function () {
                // When clicked, toggle the "view" div.
                $('second').hide();
                $('one').slideToggle(400);
                return false;
            });
            $('div.slide1').click(function () {
                // When clicked, toggle the "view" div.
                $('one').hide();
                $('second').slideToggle(400);
                return false;
            });


        });
    </script>
</head>
<body>

    <div class="slide">
        <a href="#" class="slide">Disclaimer-1</a></div>
    <div class="slide1" >
        &nbsp; &nbsp; | &nbsp; &nbsp; <a href="#" class="slide1">Behavior</a></div>
    <div id="one" class="content">
       As you can see the structure, the elements of the menu are inside the div with class “menu_list”. 

    </div>
    <div id="second" class="content1">
       I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight  
    </div>
    <br />
    <br />
</body>
</html>
4

3 に答える 3

3

Hiya ほら、作業デモ http://jsfiddle.net/gVjFs/ 2 番目の 2 つのリンクを一緒に http://jsfiddle.net/gVjFs/3/ (div の代わりにスパンを使用)

ここでテキストを切り替えて最終的に http://jsfiddle.net/KpqvE/

上記のコメントで言及されている派手なデモからの2 番目のデモ: http://jsfiddle.net/5TfJy/2/ (このデモには 2 つのタブしかありません。

あなたに一番合っているのはどちらですか。そしてコードは、何が欠けていたのか、つまり#IDのために何が欠けていたのかを明らかにします。

これがあなたが言及した振る舞いをするのに役立つことを願っています:)

div の代わりにスパンを使用する HTML http://jsfiddle.net/KpqvE/ 

<span class="slide">
    <a href="#" class="slide">Disclaimer-1</a></span>
<span class="slide1" >
    &nbsp; &nbsp; | &nbsp; &nbsp; <a href="#" class="slide1">Behavior</a></span>
<div id="one" class="content">
   As you can see the structure, the elements of the menu are inside the div with class “menu_list”. 

</div>
<div id="second" class="content1">
   I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight  
</div>
<br />
<br />​

Jquery (旧)

  $(document).ready(function () {

        // Hide the "view" div.
        $('#one').hide();
        $('#second').hide();
        // Watch for clicks on the "slide" link.
        $('div.slide').click(function () {
            // When clicked, toggle the "view" div.
            $('#second').hide();
            $('#one').slideToggle(400);
            return false;
        });
        $('div.slide1').click(function () {
            // When clicked, toggle the "view" div.
            $('#one').hide();
            $('#second').slideToggle(400);
            return false;
        });


    });​

更新された Jquery コード

$(document).ready(function() {

    // Hide the "view" div.
    $('#one').hide();
    $('#second').hide();
    // Watch for clicks on the "slide" link.
    $('span.slide').click(function() {
        // When clicked, toggle the "view" div.
        $('#second').hide();
        $('#one').slideToggle(400, function() {

            if ($(this).is(":visible"))
              $('span.slide > a').text('hide Disc');
            else
              $('span.slide > a').text('Disclaimer-1');

        });
        return false;
    });
    $('span.slide1').click(function() {
        // When clicked, toggle the "view" div.
        $('#one').hide();
        $('#second').slideToggle(400, function() {

            if ($(this).is(":visible"))
              $('span.slide1 > a').text('hide Behavior');
            else
              $('span.slide1 > a').text('Behavior');

        });
        return false;
    });


});​
于 2012-04-26T03:45:50.620 に答える
2

これを試してみてください: Demo、これはほとんどあなたの質問に答えないと思いますが、少なくともそれはあなたに使用方法のアイデアを与えるでしょうtoggle().

于 2012-04-26T03:56:11.653 に答える
0

jqueryには、toggle()表示されている場合は非表示、非表示の場合は表示する機能があります。

于 2012-04-26T03:41:16.277 に答える