Question

如何让它工作，当点击展开它时再点击再次折叠它... 如果它已经展开然后说隐藏，如果它已经崩溃，那么说show。

下面是目前的代码。

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

Answer 1

Hiya这里你去男人 workingDemo http://jsfiddle.net/gVjFs/ 在这里将2个链接加在一起 http://jsfiddle.net/gVjFs/3/（使用span而不是div）

最后切换文字 http://jsfiddle.net/KpqvE/

第2次演示来自上面评论中提到的奇特之处：http://jsfiddle.net/5TfJy/2/（此演示只有2个标签。

哪一个最适合你。并且代码将清楚地说明遗漏的内容，即ids #。

希望这有助于你提到的beahviour：）

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;
    });


});

Answer 2

试试这个：Demo，我认为这几乎不会回答你的问题，但至少可以让你知道如何使用toggle()。

Answer 3

jquery有一个toggle()函数，如果可见则会隐藏，并显示是否隐藏。

简单展开/折叠div

3 个答案: