jquery 怎么實現(xiàn)展開和收起按鈕之間的切換

需要準備的材料分別有：電腦、html編輯器、瀏覽器。

成都創(chuàng)新互聯(lián)公司-專業(yè)網站定制、快速模板網站建設、高性價比敘永網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式敘永網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋敘永地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

1、首先，打開html編輯器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的script標簽，輸入jquery代碼：

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

if ($(this).text() === '展開') {

$('input').show();

$(this).text('收起');

} else {

$('input').hide();

$(this).text('展開');

}

});

3、瀏覽器運行index.html頁面，此時顯示出了展開按鈕。

4、點擊展開按鈕，此時展開了輸入框，并且按鈕變成了收齊按鈕。

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

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

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

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

實際代碼如下：html 代碼

Jquery代碼：

擴展資料

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

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

參考資料：百度百科?jQuery

jquery左邊菜單欄點擊時被點擊的展開，其他隱藏效果怎么弄??？

$(function?()?{

$('dl').click(function?()?{

$(this).slideDown().siblings().slideUp();

});

});

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

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

這里使用jquery實現(xiàn)展開、隱藏特效，點擊列表標題后該項內容展開，其它項收縮起來，也就是不顯示了。個人喜好了，有的喜歡在默認狀態(tà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程序設計有所幫助。

用jquery怎么實現(xiàn)點擊圖片展開，收縮的功能

$("abc").click(function(){

var _abc = $(this);

$("bcd").toggle(1000,function(){

_abc.removeClass("one").addClass("two");

});

});

你試試，應該是這樣，one 是展開的箭頭樣式 two是收縮的箭頭樣式

文章名稱：jquery點擊展開,js點擊展開
URL地址：http://jinyejixie.com/article28/hojjjp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、網站策劃、商城網站、定制網站、搜索引擎優(yōu)化、手機網站建設

廣告

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