注册 登录
编程论坛 JavaScript论坛

js 改变不了css样式的,这是怎么回事,就单击的时候显示一下,马上又隐藏了,求解决方法

cs1344 发布于 2016-04-19 09:49, 4321 次点击
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

 <script type="text/javascript" language="jscript">
     
    function fn(){
        var d = document.getElementById("ul2");
        // d.style.display="block";
        // d.style["display"]="block";
            // d.style.cssText="display:block";
                d.className="show";
     }
      /*
      var display = false;
      function fn(){
        if(display){
           document.getElementById("ul2").style.display = "none";
           display = false;
        }
        else {
           document.getElementById("ul2").style.display = "block";
           display = true;
        }
      }
      */
    </script>
    <style type="text/css">
     .hide{
         display:none;
     }
     .show{
         display:block;
     }
    </style>
</head>

<body>
  <div id="div">
   <ul id="ul1">
     <li><a href="">11</a></li>
     <li><a href="">12</a></li>
     <li>
     <a href="" onclick="fn()">13</a>
       <ul id="ul2" class="hide">
          <li><a href="">0</a></li>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
       </ul>
     </li>
     <li><a href="">14</a></li>
     <li><a href="">15</a></li>
   
   </ul>
  </div>
</body>
</html>
2 回复
#2
sjotaku2016-05-04 10:43
a href=""会刷新当前页面,
改成
<li>
     <a href="javascript:void(0)" onclick="fn()">13</a>
       <ul id="ul2" class="hide">
          <li><a href="">0</a></li>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
       </ul>
</li>
#3
leeqihero2016-05-06 13:23
程序代码:
<html>
<head>
<meta charset="utf-8"/>
<script>
var 显示 = false;
function fn(){
if(显示){
document.getElementById("ul2").style.display = "none";
显示 = false;
}
else {
document.getElementById("ul2").style.display = "block";
显示 = true;
}
}
</script>
</head>
<body>
<div>
<ul>
<li>11</li>
<li>12</li>
<li>
<a href="#" onclick="fn()">13</a>
<ul id="ul2" class="hide">
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>14</li>
<li>15</li>
</ul>
</div>
</body>
</html>
1