给博客园添加目录导航时出现两个title在同一行上

2019-10-28 21:30发布

站内文章 / HTML/CSS

90 0

来，给爷笑一个

女 | 书童

私信

问题:

给博客园添加目录导航时出现两个title在同一行上,如图
在网上参考的代码如下
css代码
/生成博客目录的CSS/

uprightsideBar{

font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
top:50px;
right:0px;
width: auto;
height: auto;

}

sideBarTab{

float:left;
width:30px; 
border:1px solid #e5e5e5;
border-right:none;
text-align:center;
background:#ffffff;

}

sideBarContents{

float:left;
overflow:auto; 
overflow-x:hidden;!important;
width:300px;
min-height:108px;
max-height:460px;
border:1px solid #e5e5e5;
border-right:none; 
background:#ffffff;

}

sideBarContents dl{

margin:0;
padding:0;

}

sideBarContents dt{

margin-top:5px;
margin-left:5px;

}

sideBarContents dm,dd, dt {

cursor: pointer;

}

sideBarContents dm:hove,dd:hover, dt:hover {

color:#A7995A;

}

sideBarContents dm{

margin-left:20px;

}

sideBarContents dd{

margin-left:20px;

}

js代码：

/*
获取滚动条当前位置
*/
getScrollBarPosition:function () {
    var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
    return  scrollBarPosition;
},

/*
移动滚动条，finalPos 为目的位置，internal 为移动速度
*/
moveScrollBar:function(finalpos, interval) {

    //若不支持此方法，则退出
    if(!window.scrollTo) {
        return false;
    }

    //窗体滚动时，禁用鼠标滚轮
    window.onmousewheel = function(){
        return false;
    };
      
    //清除计时
    if (document.body.movement) { 
        clearTimeout(document.body.movement); 
    } 

    var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

    var dist = 0; 
    if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
        window.onmousewheel = function(){
            return true;
        }
        return true; 
    } 
    if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
        dist = Math.ceil((finalpos - currentpos)/10); 
        currentpos += dist; 
    } 
    if (currentpos > finalpos) { 
        dist = Math.ceil((currentpos - finalpos)/10); 
        currentpos -= dist; 
    }
    
    var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
    window.scrollTo(0, currentpos);//移动窗口
    if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
    {
        window.onmousewheel = function(){
            return true;
        }
        return true;
    }
    
    //进行下一步移动
    var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
    document.body.movement = setTimeout(repeat, interval); 
},

htmlDecode:function (text){
    var temp = document.createElement("div");
    temp.innerHTML = text;
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
},

/*
创建博客目录，
id表示包含博文正文的 div 容器的 id，
mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
interval 表示移动的速度
*/
createBlogDirectory:function (id, mt, st,lt, interval){
     //获取博文正文div容器
    var elem = document.getElementById(id);
    if(!elem) return false;
    //获取div中所有元素结点
    var nodes = elem.getElementsByTagName("*");
    //创建博客目录的div容器
    var divSideBar = document.createElement('DIV');
    divSideBar.className = 'uprightsideBar';
    divSideBar.setAttribute('id', 'uprightsideBar');
    var divSideBarTab = document.createElement('DIV');
    divSideBarTab.setAttribute('id', 'sideBarTab');
    divSideBar.appendChild(divSideBarTab);
    var h2 = document.createElement('H2');
    divSideBarTab.appendChild(h2);
    var txt = document.createTextNode('目录导航');
    h2.appendChild(txt);
    var divSideBarContents = document.createElement('DIV');
    divSideBarContents.style.display = 'none';
    divSideBarContents.setAttribute('id', 'sideBarContents');
    divSideBar.appendChild(divSideBarContents);
    //创建自定义列表
    var dlist = document.createElement("dl");
    divSideBarContents.appendChild(dlist);
    var num = 0;//统计找到的mt和st
    mt = mt.toUpperCase();//转化成大写
    st = st.toUpperCase();//转化成大写
    lt = lt.toUpperCase();//转化成大写
    //遍历所有元素结点
    for(var i=0; i<nodes.length; i++)
    {
        if(nodes[i].nodeName == mt|| nodes[i].nodeName == st|| nodes[i].nodeName == lt)    
        {
            //获取标题文本
            var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
            nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 
            nodetext = BlogDirectory.htmlDecode(nodetext);
            //插入锚        
            nodes[i].setAttribute("id", "blogTitle" + num);
            var item;
            switch(nodes[i].nodeName)
            {
                case mt:    //若为主标题 
                    item = document.createElement("dt");
                    break;
                case st:    //若为子标题
                    item = document.createElement("dd");
                    break;
                case lt:    //若为子标题
                    item = document.createElement("dm");
                    break; 
            }
            
            //创建锚链接
            var itemtext = document.createTextNode(nodetext);
            item.appendChild(itemtext);
            item.setAttribute("name", num);
            item.onclick = function(){        //添加鼠标点击触发函数
                var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
            };            
            
            //将自定义表项加入自定义列表中
            dlist.appendChild(item);
            num++;
        }
    }
    
    if(num == 0) return false; 
    /*鼠标进入时的事件处理*/
    divSideBarTab.onmouseenter = function(){
        divSideBarContents.style.display = 'block';
    }
    /*鼠标离开时的事件处理*/
    divSideBar.onmouseleave = function() {
        divSideBarContents.style.display = 'none';
    }

    document.body.appendChild(divSideBar);
}

};

window.onload=function(){
/页面加载完成之后生成博客目录/
BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3","h4",20);
}
</script>

请教改怎么改才能让每个标题各占一行