为了账号安全,请及时绑定邮箱和手机立即绑定

这段代码哪里有问题= =?display:none可以正常工作,但为什么display:block没反应

<!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></title>
	<meta charset="utf-8">
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
            font-size: 9pt;
            line-height: 180%;
        }
        #pn
        {
            background: #f8f8f8;
            height: auto;
            width: 750px;
            margin: 0 auto;
            padding: 5px;
        }
        .artTitle
        {
            font-weight: bold;
            color: #3030FF;
            font-size: 11pt;
        }
        .subTitle
        {
            color: #CCC;
        }
        .content
        {
            border: 1px solid #CCC;
            display: none;
            padding: 5px;
        }
        .btm
        {
            text-align: right;
            height: 30px;
        }
        .btn
        {
            width: 80px;
            height: 20px;
            padding: 5px 3px 5px 3px;
            text-align: center;
            text-decoration: none;
            background: #f0f0f0;
            border: 1px solid #CCC;
        }
    </style>
    <script type="text/javascript">
        // 显示函数
        function showdiv(obj) {
        var x = obj.parentNode;
			x.style.display="none";
			x.nextSibling.style.display="block";
        }

       // 隐藏函数
        function hidediv(obj) {
            
            
        }

    </script>
</head>
<body>
    <div id="pn">
        <div id="art0">
            <p class="artTitle">
                Slack:团队日常沟通协作工具典范
            </p>
            <p class="subTitle">
                作者:来自网络 发表时间:2014-3-1
            </p>
            <p>
                现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:
                在所有端都可以进行,即桌面端,包括Mac OS和Windows系统;web端即浏览器;移动端的支持包括iOS和Android。 同时,移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为,即"发布一条信息",团队成员只需要做一个这个基本行为即可。 发布一条... 
                
				<a href="#" onclick="showdiv(this);" >全文</a>
        
			</p>    
            <div class="content">
                <p>
                    现在可以在Slack.com上申请成为试用用户,这是一个面对企业、团队的协作工具,似乎需要试用企业域名后缀的邮箱。 Slack从目前看,基本符合我对团队沟通工具的完全要求。特点如下:</p>
                
                <p>
                    聚焦核心行为,即“发布一条信息”,团队成员只需要做一个这个基本行为即可。</p>
                <p>
                    发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等,以便协作更好进行,如果文件能快速预览则更好。</p>
                <p>
                    支持@方式直接和单个团队成员沟通,并且能够被其他成员看到和参与进来。</p>
                <p>
                    以#来进行快速形成话题组或者项目组。</p>
                <p>
                    良好的搜索支持。 上述虽然是Slack的特性,也是我对团队日常协作工具的要求——显然,Slack完全符合这些要求,而且产品做得很易用。这些要求其实就是我对“移动、社交、云端存储”的理解,这三个因素基本会重写很多软件和应用。</p>
                <p>
                    Slack有免费的lite版本,但收费版本似乎价格对中文用户而言略高。</p>
                <p>
                    Slack由我很喜欢的项目Flickr的创始人新公司TinySpeck创办,因此基础甚好。而且从目前看,基本上会成为一个很成功的应用,所以在产品持续发展上面应该毫无问题。</p>
                <p>
                    The post Slack:团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
                <div class="btm">
                    <a href="javascript:hidediv(this);" class="btn">收起全文</a>    //点击收起全文实现收起
                </div>
            </div>
    </div>
        <hr />
        
      
         
    </div>
</body>
</html>


正在回答

3 回答

  function showdiv(obj) {

        var x = obj.parentNode;

            x.style.display="none";

            x.nextSibling.style.display="block";

        }

 我删掉了html中<p>和.content之间的空格,lz的代码就可以运行了

             <p>……

                <a href="#" onclick="showdiv(this);" >全文</a>

            </p><div class="content">   //中间没有空格

            <p>

             现在……特点如下:

            </p>


0 回复 有任何疑惑可以回复我~

x.nextSibling得到的值是个空格   所以你的页面效果没出来

在Firefox中,x的nextSibling并不是congtent,因为两者之间有一个换行符     这被认为是一个空格    如果你想通过x的值得到content里的内容  而不是按照老师设置x和y的变量获取值  那么你就试试

x.style.display = "none";

x.nextSibling.nextSibling.style.display = "block";

写两个nextSibling  第一个nextSibling得到空格  第二个nextSibling就得到你想要的值了   亲测有效   你可以试试看


 

1 回复 有任何疑惑可以回复我~
 function showdiv(obj) {
            
              var x=obj.parentNode;
           var y=x.nextSibling;
           while(y.nodeType!=1){
               y=y.nextSibling;
           }
            x.style.display="none";
            y.style.display="block";
            
           
        }

显示代码要进行一个判断,否则找不到节点。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
展开与收起效果
  • 参与学习       33641    人
  • 解答问题       179    个

通过效果展示与案例分析,教您实现不同类型的展开与收起效果

进入课程

这段代码哪里有问题= =?display:none可以正常工作,但为什么display:block没反应

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信