如何用Jquery實現(xiàn)DIV由下向上展開的效果？

如果你的div是通過position:absolute絕對定位的，且通過相對與底部定位，如bottom:0px 這個時候調(diào)用slideDown就是向上展開的（因為slideDown說白了就是動態(tài)改變元素高度，底部定位固定，高度變高的時候就向上擴展了）。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鷹潭網(wǎng)站建設(shè)、鷹潭做網(wǎng)站、鷹潭網(wǎng)站設(shè)計、鷹潭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鷹潭企業(yè)網(wǎng)站模板建站服務(wù)，十余年鷹潭做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

或者可以使用jQuery的$().animate()動畫方法，自己定義動畫的內(nèi)容，因為不知道你的div是通過什么方法定位到底部的，這里只能寫個簡單的例子

$("#bar").stop(true,true).animate({hight:100px});

如果還有問題可以追問或者加我hi詳細詢問

默認隱藏一部分內(nèi)容,點擊展開顯示更多,這種效果jquery怎么做?

這個功能其實很容易實現(xiàn)，我在這告訴你思路一個思路和步驟：

1、把要顯示的原樣輸出，作為更多要隱藏的內(nèi)容你就用style="display:none"屬性把它先隱藏；

2、給查看更多綁定點擊事件，點擊后show你要展示的內(nèi)容；

實際代碼如下：html 代碼

Jquery代碼：

擴展資料

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。

jQuery的核心特性可以總結(jié)為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

參考資料：百度百科?jQuery

jquery 如何實現(xiàn)多個DIV展開收縮

//給那些div一個共同的屬性：比如name="showhide"

$("div[name=showhide]").fadeIn(500);//顯示name是showhide的所有div

$("div[name=showhide]").fadeOut(500);//隱藏name是showhide的所有div

jQuery中slideToggle()這個動作是從上至下的，如何讓它從左至右展開？

沒有從左往右的API，但是可以用animate來寫

style

#aa{width:200px;height:200px;overflow:hidden;background-color:#000;}

/style

div

id="aa"dddddd/div

a

href="javascript:alr();"點擊測試/a

//引入jquery.js

script

var

aa=$("#aa");

var

is_on=true;//默認是展開的

var

aw=aa.width();//獲取aa的寬度用于還原

function

alr(){

if(is_on){

aa.stop().animate({width:"0px"},300);

}else{

aa.stop().animate({width:aw},300);

}

}

/script

slide效果本身原理也是通過倒計時來逐漸改變元素的高度來做的。所以同理也可以做左右的

jquery實現(xiàn)點擊展開列表同時隱藏其他列表

本文實例講述了jquery實現(xiàn)點擊展開列表同時隱藏其他列表。分享給大家供大家參考。具體如下：

這里使用jquery實現(xiàn)展開、隱藏特效，點擊列表標題后該項內(nèi)容展開，其它項收縮起來，也就是不顯示了。個人喜好了，有的喜歡在默認狀態(tài)下不顯示其它選項的內(nèi)容，這個就是這種情況，僅供參考吧。

運行效果截圖如下：

具體代碼如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

titlejs點擊展開列表/title

script

type="text/javascript"

src="jquery-1.6.2.min.js"/script

/head

script

type="text/javascript"

//

收縮展開效果

$(document).ready(function(){

$('.box').click(function(){

$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();

})

});

/script

style

type="text/css"

.box{width:200px;

margin:0

auto;

background:#CCC;}

.text{display:none;}

/style

body

div

class="box"

h2對ASP擅長的程序/h2

div

class="text"論壇類和文章類/div

/div

/div

div

class="box"

h2對PHP擅長的程序/h2

div

class="text"博客類和新聞類/div

/div

/div

div

class="box"

h2對前端擅長的插件/h2

div

class="text"jquery/div

/div

/div

/body

/html

希望本文所述對大家的jquery程序設(shè)計有所幫助。

jquery 從下往上的收縮展開效果 默認展開

如果用的是jq可以用這個函數(shù)

$(document).ready(function(){

$(".con .dynamic").next(".tab_ul").slideDown();//默認顯示

$(".con .dynamic").click(function(){

$(this).next(".tab_ul").slideToggle("slow");//顯示切換

});

});

希望對你有所幫助

名稱欄目：jquery展開,jquery展開收縮效果
文章路徑：http://m.rwnh.cn/article10/phjddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、網(wǎng)站策劃、小程序開發(fā)、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)