.toggle() .slideToggle() .slideUp() .slideDown()方法

Posted on 2014-10-12 Edited on 2023-11-24 In jQuery Views: Disqus:

1、.toggle()

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").toggle();
            });
        });
    </script>
</head>
<body>

    <button>Toggle</button>
    <p>This is a paragraph with little content.</p>
    <p>This is another small paragraph.</p>
</body>
</html>

此toggle方法可以顯示或隱藏內容

2、.slideToggle()

JS Bin

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
        });
    </script>

    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>

    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>

</body>
</html>

對id為"panel"作slidtoggle()，slidtoggle速度可為slow、fast、milliseconds

3、.sideUp()、.slideDown()

JS Bin

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").slideUp();
            });
            $(".btn2").click(function () {
                $("p").slideDown();
            });
        });
    </script>
</head>
<body>

    <p>This is a paragraph.</p>
    <button class="btn1">Slide up</button>
    <button class="btn2">Slide down</button>

</body>
</html>

相當於將slideTogglle()拆成slideDown()與SlideUp()

4、另一例子slideUp與slideDown應用(範例取材自網路僅供學習用途)

部分jQuery程式碼為

//宣告一個Stage物件
var Stage = {};

//Stage物件裡宣告一個init function
Stage.init = function () {
    Stage.initrule();
};

//Stage物件裡宣告一個initrule function
Stage.initrule = function () {
    //放入一個物件key為"open"、value為false，與Key為"idx"、value為1
    $("#Ruletitle1").data("open", false).data("idx", 1);

    //將click事件繫結到#Ruletitle1，並將event物件傳入function裡
    //Stage裡宣告一個infoBtnClick function
    $("#Ruletitle1").bind("click", function (event) { Stage.infoBtnClick(event); });


    $("#Ruletitle2").data("open", false).data("idx", 2);
    $("#Ruletitle2").bind("click", function (event) { Stage.infoBtnClick(event); });
};

//Stage物件裡宣告一個infoBtnClick function
Stage.infoBtnClick = function (event) {
    //currentTarget代表現在所指的節點
    var idx = $(event.currentTarget).data("idx");//此時的idx物件的值為1
    var open = $(event.currentTarget).data("open");//此時的open物件的值為false
    if (open) {
        $(event.currentTarget).data("open", false);
        //針對現在結點移除"ruleBoxTitle_over"class名稱，增加"ruleBoxTitle"class名稱
        $(event.currentTarget).removeClass("ruleBoxTitle_over").addClass("ruleBoxTitle");
        //針對該"#Rcontent" + idx節點做slideUp捲動期間為300ms
        $("#Rcontent" + idx).slideUp({ duration: 300 });
    } else {
        $(event.currentTarget).data("open", true);
        $(event.currentTarget).removeClass("ruleBoxTitle").addClass("ruleBoxTitle_over");
        $("#Rcontent" + idx).slideDown({ duration: 500 });
    }
};

$(Stage.init);

範例程式：SlideUpDown.rar

5.Bootstrap toggle()

Bootstrap Template

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>Simple Collapsible</h2>
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
      <div id="demo" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

預設為slideUp狀態，如果初始要為slideDown狀態則改為

參考資料：

jQuery Effect Methods

jQuery slideUp() Method

.slideUp()