如圖，在PC端需要滑鼠移動至分類二、分類三和子分類三的時候可以展開；滑鼠移開時自動關閉。
但是在手機端需要手指點擊分類二、分類三和子分類三的時候可以展開，手指點擊如上三個按鈕及空白處時可以關閉。
親測幾次在iphone上不可以，不知為何。
uj5u.com熱心網友回復：
手機端沒有滑鼠，也就不能用滑鼠相關的事件 mouseover,mouseout,mousemove,mousedown,mouseup。需要改用手勢事件 touchstart,touchmove,touchend 或者點擊事件 click。
uj5u.com熱心網友回復：
具體該如何寫呢？
uj5u.com熱心網友回復：
可以都用click事件，這樣兩邊都能兼容uj5u.com熱心網友回復：
var d = document.getElementById(‘test’);d.ontouchstart = function () {}
uj5u.com熱心網友回復：
你都寫出來pc端懸浮展開,改成點擊展開不就行了? api不會用上網搜一下用法不就行了,懸浮觸發跟點擊觸發就是一個方法不一樣,內容都可以照搬過來,手機都沒有懸浮這個操作,長按就有
uj5u.com熱心網友回復：
沒有看到你代碼你可以根據這個代碼來模仿一下<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,h2{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#list{
width: 300px;
border: 1px solid #000;
margin: 20px auto;
}
#list h2 {
height: 50px;
line-height: 50px;
text-indent: 20px;
background: #6ff url(images/ico1.gif) 5px no-repeat;
}
#list ul{
display: none;
}
#list ul li{
height: 35px;
line-height: 35px;
border-bottom: 1px solid #00f;
text-indent: 24px;
}
#list .active{
background-image: url(images/ico2.gif);
background-color: #ff0;
}
#list .hover{
background: #ccc;
}
</style>
<script>
window.onload=function () {
var oList=document.getElementById('list');
var aH2=oList.getElementsByTagName('h2');
var aUl=oList.getElementsByTagName('ul');
var aLi=null;
var arrLi=[];
for(var i=0;i<aUl.length;i++){
aH2[i].index=i;
aH2[i].onclick=function () {
if(this.className===''){
for(i=0;i<aUl.length;i++){
aUl[i].style.display='none';
aH2[i].className='';
}
aUl[this.index].style.display='block';
this.className='active';
}else{
aUl[this.index].style.display='none';
this.className='';
}
}
}
//小套路
for(i=0;i<aUl.length;i++){
aLi=aUl[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);
}
}
console.log(arrLi.length);
for (i=0;i<arrLi.length;i++){
arrLi[i].onclick=function () {
if(this.className===''){
for(i=0;i<arrLi.length;i++){
arrLi[i].className='';
}
this.className='hover';
}else{
this.className='';
}
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>
<h2>我的好友</h2>
<ul>
<li>張三</li>
<li>張三</li>
<li>張三</li>
</ul>
</li>
<li>
<h2>企業好友</h2>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
</li>
<li>
<h2>黑名單</h2>
<ul>
<li>王五</li>
<li>王五</li>
</ul>
</li>
</ul>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/104024.html
標籤：JavaScript