js控制,顯示或隱藏按鈕

現(xiàn)有的情況是網(wǎng)站主頁(yè)有一個(gè)顯示時(shí)事新聞的list,通常情況下只顯示五條最新消息,消息下方有一個(gè)【more】按鈕,點(diǎn)擊查看更多,當(dāng)全部信息展開(kāi)后,此時(shí)按鈕仍然顯示為【more】有些奇怪,想把它改成【close】,點(diǎn)擊進(jìn)行關(guān)閉。

方法很多種,一個(gè)是更改按鈕顯示內(nèi)容

當(dāng)然也可以重新追加一個(gè)【close】按鈕,我選擇的是第二種,

在js中添加如下代碼:

$(document).ready(function)(){?

????A.b(); //用于隱藏【close】按鈕

????A.c(); //【more】點(diǎn)擊事件

????A.d(); //【close】點(diǎn)擊事件

});

????A = {

????????b:function() {

????????????$(‘.close’).hide();//首先隱藏【close】按鈕

????????},

????????c:function() {

????????????$(document).on(‘click’,‘.more’,function() {

????????????$(‘.close’).fadeIn(); //顯示【close】按鈕

????????????$(‘.more’).hide(); //隱藏【more】按鈕

????????});

????},

????????d:function() {

????????????$(document).on(‘click’,’.close’,function() {? ? ?

????????????????XXX.slideToggle(‘slow’,function(){ //為了讓按鈕轉(zhuǎn)換不突兀,在列表隱藏動(dòng)作結(jié)束之后在加載后續(xù)動(dòng)作

????????????????$(‘.close’).hide();//隱藏關(guān)閉按鈕

????????????????$(‘.more’).fadeIn();//顯示更多按鈕

????????????????});

????????????});

????????}

};

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,153評(píng)論 0 2
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,878評(píng)論 0 3
  • jQuery 安裝 把 jQuery 添加到您的網(wǎng)頁(yè) 如需使用 jQuery,您需要下載 jQuery 庫(kù)(會(huì)在下...
    Clover園閱讀 346評(píng)論 0 0
  • 通過(guò)jQuery,您可以選?。ú樵儯琿uery)HTML元素,并對(duì)它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹(shù)8824閱讀 726評(píng)論 0 3
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,512評(píng)論 0 2

友情鏈接更多精彩內(nèi)容