摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博輸入字數(shù)（1）</title> &nbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博輸入字數(shù)（1）</title>
<!-- 引入線上layuicss文件 -->
<link rel="stylesheet" type="text/css" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">
<style type='text/css'>
body {
background: rgb(233, 232, 232);
}
.clear {
clear: both;
}
/* 盒子 */
.wrap {
background: #fff;
width: 580px;
height: 140px;
padding: 10px;
padding-top: 15px;
margin: 10px auto;
font-size: 12px;
border-radius: 5px;
}
/* 頭部 左 */
.header_left {
color: #7f5333;
font-size: 18px;
font-family: '華文新魏';
float: left;
}
/* 頭部 右 */
.header_right {
float: right;
}
/* 頭部 右 a標簽 */
.header_right a {
margin-left: 10px;
color: #eb7350;
text-decoration: none;
}
/* 主體*/
.content {
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
margin-top: 4px;
}
/* 主體 文本域 */
.content textarea {
height: 68px;
width: 568px;
resize: none;
border: 0;
outline: none;
font-size: 14px;
color: #333;
}
/* 底部 */
.footer {
width: 580px;
height: 35px;
}
/* 底部 a標簽 懸停樣式 */
.footer a:hover {
color: #eb7350;
cursor: pointer;
}
/* 底部 左 */
.footer_left {
width: 380px;
height: 25px;
line-height: 25px;
padding-top: 10px;
float: left;
}
/* 底部 左 a標簽 樣式 */
.footer_left a {
color: #333;
text-decoration: none;
margin-right: 15px;
}
/* 底部 左 i標簽 樣式 */
.footer_left a i {
font-size: 18px;
font-weight: 600;
margin-right: 5px;
}
/* 更多 樣式 */
.ii {
color: #7C6E78;
font-size: 18px;
position: relative;
}
/* 更多 二級 */
.ii ul {
display: none;
position: absolute;
left: -10px;
color: #333;
font-size: 12px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
border-radius: 3px;
width: 76px;
padding: 2px;
line-height: 20px;
}
/* 更多 二級 li樣式 */
.ii ul li {
height: 20px;
padding: 8px 10px;
}
/* 更多 二級 li 懸停樣式 */
.ii ul li:hover {
background: #f2f2f5;
color: #eb7350;
}
/* 更多 懸停樣式 */
.ii:hover {
cursor: pointer;
color: #eb7350;
}
/* 底部 右 */
.footer_right {
float: right;
padding-top: 7px;
height: 28px;
line-height: 28px;
text-align: center;
}
/* 底部 右 a */
.footer_right a {
display: inline-block;
height: 28px;
line-height: 28px;
margin-right: 15px;
position: relative;
}
/* 狀態(tài) 二級 */
#subnav2 ul {
display: none;
position: absolute;
right: 0px;
color: #333;
font-size: 12px;
border: 1px solid #ccc;
background: #fff;
text-align: center;
border-radius: 3px;
width: 105px;
line-height: 15px;
padding: 2px;
}
/* 狀態(tài) 二級 li樣式 */
#subnav2 ul li {
height: 15px;
padding: 8px 10px;
}
/* 狀態(tài) 二級 最后一個li設(shè)置上邊框 */
#subnav2 ul li:nth-last-child(1) {
border-top: 1px solid #d9d9d9;
}
/* 發(fā)布按鈕樣式 */
.footer_right a:nth-child(2) {
width: 60px;
height: 28px;
padding: 0px 10px;
/* border: 1px solid #f77c3d; */
/* background: #ff8140; */
background: #ffc09f;
color: #fff;
font-size: 14px;
margin: 0;
}
/* 發(fā)布按鈕懸停樣式 */
/* .footer_right a:nth-child(2):hover{
background:#f7671d;
} */
</style>
<script type='text/javascript'>
// 文檔完全加載完后執(zhí)行
window.onload = function () {
// 整個文檔添加點擊事件 傳入?yún)?shù)
window.onclick = function (nav) {
// 如果參數(shù)的id是subnav1 顯示 否則隱藏
if (nav.path[0].id === 'subnav1') {
nav.path[0].children[0].style.display = 'block';
} else {
document.getElementById('subnav1').querySelector('ul').style.display = 'none';
}
// 如果參數(shù)的id是subnav2 顯示 否則隱藏
if (nav.path[1].id === 'subnav2') {
nav.path[1].querySelector('ul').style.display = 'block';
} else {
document.getElementById('subnav2').querySelector('ul').style.display = 'none';
}
//如果參數(shù)的標簽名是文本域 改變父級的邊框 否則還原
if(nav.path[0].tagName === 'textarea' || nav.path[0].tagName === 'TEXTAREA'){
nav.path[0].parentNode.style.border = '1px solid #fa7d3c';
}else{
document.getElementsByTagName('textarea')[0].parentNode.style.border = '1px solid #ccc';
}
};
// 獲取subnav2下所有的li
var li_arr = document.getElementById('subnav2').querySelectorAll('li');
// 循環(huán)綁定事件
for (var i = 0; i < li_arr.length; i++) {
(function (i) {
// 綁定鼠標移入事件
li_arr[i].onmouseover = function () {
// 設(shè)置當前l(fā)i的樣式
this.style.cssText = 'background:#f2f2f5;color:#eb7350;';
// 循環(huán)其他的li 去掉其他li的樣式
for (var j = 0; j < li_arr.length; j++) {
var ci = li_arr[i];
if (li_arr[j] != this) {
li_arr[j].style = '';
}
}
}
// 綁定點擊事件
li_arr[i].onclick = function(){
//修改文本
document.getElementById('subnav2').querySelector('span').innerText = this.innerText;
if(this.innerText === '好友圈'){
document.getElementById('submit').innerText = '好友發(fā)布';
}else{
document.getElementById('submit').innerText = '發(fā)布';
}
};
}(i));
};
}
</script>
</head>
<body>
<!-- 盒子 -->
<div class='wrap'>
<!-- 頭部 -->
<div class='header'>
<!-- 頭部 左 -->
<div class='header_left'>
<em>有什么新鮮事想告訴大家？</em>
</div>
<!-- 頭部 右 -->
<div class='header_right'>
<a href="">快來曬曬我家的年味兒,記錄紅火團員的中國年>></a><a href="">熱門微博</a>
</div>
</div>
<div class='clear'></div>
<!-- 主體 -->
<div class='content'>
<!-- 文本域 -->
<textarea></textarea>
</div>
<!-- 底部 -->
<div class='footer'>
<!-- 底部 左 -->
<div class='footer_left'>
<a href=""><i class='layui-icon' style='color:#FFA405;'></i>表情</a>
<a href=""><i class='layui-icon' style='color:#84C002;'></i>圖片</a>
<a href=""><i class='layui-icon' style='color:#54A8E5;'></i>視頻</a>
<a href=""><i class='layui-icon' style='color:#5A8CE6;'>#</i>話題</a>
<a href=""><i class='layui-icon' style='color:#FF8200;'></i>頭條文章</a>
<a id='subnav1' class='layui-icon ii'>
<!-- 更多 二級 -->
<ul>
<li>直播</li>
<li>點評</li>
<li>定時發(fā)</li>
<li>音樂</li>
<li>微公益</li>
<li>新鮮事</li>
<li>超話</li>
</ul>
</a>
</div>
<!-- 底部 右 -->
<div class='footer_right'>
<a id='subnav2'><span>公開</span><i class='layui-icon' style='font-size:12px;margin-left:5px;'></i>
<!-- 狀態(tài) 二級 -->
<ul>
<li>公開</li>
<li>好友圈</li>
<li>僅自己可見</li>
<li>群可見</li>
</ul>
</a>
<!-- 發(fā)布 -->
<a href="" id='submit'>發(fā)布</a>
</div>
</div>
</div>
</body>
</html>