JQuery實現下拉麪板

原創 zhiguo2008 2018-08-31 17:06
  1.   <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Simple Slide Panel</title>
  6. <script type="text/javascript" src="jquery.js"></script>
  8. <script type="text/javascript">
  9. $(document).ready(function(){
  11.  $(".btn-slide").click(function(){
  12.   $("#panel").slideToggle("slow");
  13.   $(this).toggleClass("active"); return false;
  14.  });
  16.   
  17. });
  18. </script>
  20. <style type="text/css">
  21. body {
  22.  margin: 0 auto;
  23.  padding: 0;
  24.  width: 570px;
  25.  font: 75%/120% Arial, Helvetica, sans-serif;
  26. }
  27. a:focus {
  28.  outline: none;
  29. }
  30. #panel {
  31.  background: #754c24;
  32.  height: 200px;
  33.  display: none;
  34. }
  35. .slide {
  36.  margin: 0;
  37.  padding: 1;
  38.  border-top: solid 4px #422410;
  39.  background: url(images/btn-slide.gif) no-repeat center top;
  40. }
  41. .btn-slide {
  42.  background: url(images/white-arrow.gif) no-repeat right -50px;
  43.  text-align: center;
  44.  width: 144px;
  45.  height: 31px;
  46.  padding: 10px 10px 0 0;
  47.  margin: 0 auto;
  48.  display: block;
  49.  font: bold 120%/100% Arial, Helvetica, sans-serif;
  50.  color: #fff;
  51.  text-decoration: none;
  52. }
  53. .active {
  54.  background-position: right 12px;
  55. }
  56. </style>
  57. </head>
  59. <body>
  61. <div id="panel">
  62.  <!-- you can put content here -->
  63. </div>
  65. <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
  67. </body>
  68. </html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

網絡請求：簡單的封裝一個請求

我們可以新建一個 server 文件夾 ，裏面創建一個server.js 文件，來集中處理我們項目中用到的請求： var server = function(url, type, params) { return new Promi

昨夜太平长安888 2020-07-08 03:15:41

省市三級聯動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例

本文主要列舉了省市三級聯動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例。前段時間需要作一個的Web前端應用，需要用多個框架，一個典型的應用場景是省市三級聯動，基於此應用，特將三種主要的aja

zrz009 2020-07-08 11:14:16

JQuery 之Ajax 示例

 jQuery之ajax post篇------Code <script type="text/javascript">function adddata()    {     var typeName=$("#<%=this.typeNa

zrz009 2020-07-08 11:14:16

Ajax 中AnimationExtender控件的用法和屬性

  功能：         用來美化、裝飾網站等。 屬性：          OnLoad：表示要觸發的事件是加載頁面時。           On

ethan永不言弃 2020-07-08 09:21:00

aJax請求不走後臺405排查

     本地起tomcat服務默認是http的，但是ajax請求的url是https，也就是跨域了。      然後不走後臺，瀏覽器F12顯示405      所以要配置一下tomcat，參考tomcat8.5配置http

做猪呢，最重要的是开森啦 2020-07-08 08:57:55

Jquery調用WebMethod(PageMethod) NET2.0

必須在WebConfig下的system.web節點加入此配置信息    <httpModules>      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule

jarryzhong 2020-07-08 05:30:21

RESTful開發風格

面試題：你平時是怎麼設計接口的？ 基於RESTful風格設計接口，RESTful風格主要體現在資源上，每一個資源都有唯一的URL標識。對於不同的行爲，使用對應的http-method操作。對於相同的URL，如果http-met

CD4356 2020-07-08 04:25:07

jquey 驗證表單是否存在不能爲空（ajax+validattion） .

 <%@page pageEncoding="utf-8"%> <%@include file="../../common/head.jsp"%>

JohnnyHuang_ 2020-07-08 02:59:43

小試JavaScript多線程

    這兩天一直在弄ajax，用多了才發現了ajax 的cache問題，請求了好多次，得到了確是相同的結果，經常我想在請求的同時去做一些其它的事情，我在想javascript裏有沒有辦法用多線程，經過在網上查找找到了結果。    法寶就

bhbhjackyin 2020-07-08 02:35:54

JavaScript 網頁信息採集Demo

     目前可以從淘寶的商品列表的起始頁開始自動翻頁直到最後一頁，然後將信息保存到Excel文件中。但對頁面顯示格式有要求，以後可以繼續改進，只做嘗試！用到了Thread , Jquery  Ajax   如: 女裝:http://li

bhbhjackyin 2020-07-08 02:35:54

關於初學ASP.NET技術的學習順序問題

前前後後有很多詢問ASP.NET的學習順序問題，在此就向打算系統學習ASP.NET技術的初學者談談我的建議。 　　如果你已經有較多的面向對象開發經驗，

yazoli2002 2020-07-08 02:32:31

Extjs系列實例四

顯示寵物列表頁面   JSP頁面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte

夜光寒 2020-07-07 23:44:02

struts +ajax驗證，總提示服務器無返回數據

下面是js的驗證 <script type="text/javascript">         $(document).ready(function(){            $.formValidator.initConfig({

ok_pig 2020-07-07 23:01:01

前後端數據交互-json 你還不會傳集合嗎?

文章目錄json前端jsp後端配置導入beancontroller測試結果後端控制檯前端控制檯 json json(JavaScript Object Notation) 是一種數據格式，就是將key和value按規範封裝成一串字

唔仄lo咚锵 2020-07-07 22:40:07

動態添加tab選項卡及tab頁面內容（ajax請求json數據）

作者：mandy 1.實現效果 2.html部分： <div id="ifrContentId"></div> 3.js部分 $(document).ready(function () {

Insightzen_xian 2020-07-07 22:21:01