<!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><title>catalog</title><style type="text/css"> li{list-style:none;}a{color:black;text-decoration:none;}#catalog{ background-color:red; padding-right:25px; margin-right:20px; float:left;}</style><script type="text/javascript"> var myBoolean = new Boolean(true); function showTree(){ var tree = document.getElementById("tree"); var list = document.getElementById("list"); if(myBoolean == true) { tree.value="-"; list.style="display:block;"; myBoolean=false; } else { tree.value="+"; list.style="display:none;"; myBoolean=true; } }</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree" onclick="showTree()" />帮助文档:</li> <ul id="list" style="display:none;" > <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li> </ul></ul></div><div id="content"><iframe name="content" width="1024" height="768" frameborder="0" ></iframe></div></body></html>
求高手看看,是不是兼容性问题,是的话如何修改下代码?跪谢。
回复讨论(解决方案)
if(myBoolean == true)
{
tree.value="-";
list.style.display="block";
myBoolean=false;
}
else
{
tree.value="+";
list.style.display="none";
myBoolean=true;
}
改成下面的就好了
IE8 IE 9 FF 都可以
写那么多,只要一句就可以实现了。。
<!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><title>catalog</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style type="text/css"> li{list-style:none;}a{color:black;text-decoration:none;} #catalog{ background-color:red; padding-right:25px; margin-right:20px; float:left;} </style> <script type="text/javascript"> $(function () { $('#tree').bind('click', function () { $('#list').toggle(); }) })</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree"/>帮助文档:</li> <ul id="list" style="display:none;" > <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li> </ul></ul></div><div id="content"><iframe name="content" width="1024" height="768" frameborder="0" ></iframe></div> </body></html>
另外,你的结构是有问题的。ul 里面写ul,那么第二个ul应该在li里面
你的不符合标准。
-
- ....
下面改装:
<script type="text/javascript"> $(function () { var ss = $('#catalog').find('li').not($('#catalog').find('li').eq(0)); ss.hide(); var x = 0; $('#tree').click(function () { if(x == 0) { ss.show(); $('#tree').val('-'); x = 1; } else { ss.hide(); $('#tree').val('+'); x = 0; } }) })</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree"/>帮助文档:</li> <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li></ul></div>
另外,你的结构是有问题的。ul 里面写ul,那么第二个ul应该在li里面
你的不符合标准。
-
- ....
下面改装:
<script type="text/javascript"> $(function () { var ss = $('#catalog').find('li').not($('#catalog').find('li').eq(0)); ss.hide(); var x = 0; $('#tree').click(function () { if(x == 0) { ss.show(); $('#tree').val('-'); x = 1; } else { ss.hide(); $('#tree').val('+'); x = 0; } }) })</script></head><body><div id="catalog"><ul> <li><input type="button" value="+" id="tree"/>帮助文档:</li> <li><a href="http://www.baidu.com" target="content">办公室</a></li> <li>绘图室</li></ul></div>
多谢提醒,我会修正这个结构问题。

本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

本文討論了&lt; iframe&gt;將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

本文解釋了HTML5&lt; time&gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1
強大的PHP整合開發環境

Atom編輯器mac版下載
最受歡迎的的開源編輯器

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver Mac版
視覺化網頁開發工具