本文實例講述了jQuery實現默認是閉合的FAQ展開效果菜單。分享給大家供大家參考。具體如下：
這是一個默認是閉合的FAQ展形菜單，主要介紹jQuery的用法。
Boolean布爾值is( String expr )用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。answer.is(':visible')是指可見的answer元素。如果可見就調用answer.slideUp();使之隱藏。else則是不可見的元素 調用answer.slideDown();使之顯示。類似的寫法還有answer.is(':first')answer.is(':last')之類的,類似于CSS的偽類a:hover
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-close-show-faq-menu-codes/
運行效果截圖如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>jQuery的一些用法</title><script type="text/javascript" src="jquery1.3.2.js"></script><script type="text/javascript">$(document).ready(function() { $('#faq').find('dd').hide(); //.隱藏顯示的元素。 $('#faq').find('dt').click(function() { var answer = $(this).next(); //當前節點的下一個節點 // alert(answer.is(':visible')); 返回true / false if (answer.is(':visible')) {//Boolean布爾值is( String expr )用一個表達式來檢查當前選擇的元素集合，// 如果其中至少有一個元素符合這個給定的表達式就返回true。//answer.is(':visible')是指可見的answer元素.//如果可見就調用answer.slideUp();使之隱藏.//else則是不可見的元素 調用answer.slideDown();使之顯示.//類似的寫法還有answer.is(':first')answer.is(':last')之類的,類似于CSS的偽類a:hover answer.slideUp(); } else { answer.slideDown(); } });});</script><style>body{font-size:10.5pt;}dt{background:#00ffcc;}</style></head><body> <dl id="faq"> <dl id="faq"> <dt>武林網簡介</dt> <dd>武林網是國內專業的網站建設資源、腳本編程學習類網站</dd> <dt>你知道AJAX嗎？</dt> <dd>它是目前很流行的交互式WEB前端應用。</dd> <dt>今晚，月亮很圓</dt> <dd>老婆，抬頭望明月，低頭想老婆！</dd> </dl></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
