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

嗨，你去吧 man workingDemo http://jsfiddle.net/gVjFs/ 第二个链接在这里 http://jsfiddle.net/gVjFs/3/（使用 span 而不是 div）

最后在这里切换文本 http://jsfiddle.net/KpqvE/

上面评论中提到的花哨的第二个演示：http: //jsfiddle.net/5TfJy/2/（这个演示只有 2 个选项卡。

最适合你的布鲁夫。代码将清楚地说明遗漏了什么，即#ids。

希望这有助于你提到的行为:)

HTML 使用 span 而不是 div 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

试试这个：演示，我想这几乎不会回答你的问题，但至少这会让你知道如何使用toggle().

于 2012-04-26T03:56:11.653 回答
0

jquery 有一个toggle()功能，如果可见则隐藏，如果隐藏则显示。

于 2012-04-26T03:41:16.277 回答