实现腾讯客服页面的 JavaScript交互效果。实现腾讯客服页面的两项用户交互效果;1点击“登录”按钮时,弹出登录窗口;点击“关闭”按钮时,登录窗口关闭。 2点击“安装与注册”列表项,会展开折叠菜单,同时选项前的图标变为“-”号;再次点击,折叠菜单收缩, 时选项前的图标变为“+”号。
时间: 2023-10-09 18:14:22 浏览: 44
以下是实现腾讯客服页面的 JavaScript 交互效果的代码:
HTML 代码:
```
<div class="header">
<button id="loginBtn">登录</button>
</div>
<div class="menu">
<ul>
<li class="menu-item" id="install">
<span class="icon">+</span>
安装与注册
<ul class="sub-menu">
<li>安装</li>
<li>注册</li>
</ul>
</li>
<li class="menu-item">
<span class="icon">+</span>
常见问题
<ul class="sub-menu">
<li>问题1</li>
<li>问题2</li>
</ul>
</li>
</ul>
</div>
<div class="login-modal">
<div class="login-modal-content">
<button id="closeBtn">关闭</button>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">登录</button>
</form>
</div>
</div>
```
CSS 代码:
```
.header {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.menu {
margin-top: 20px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu .menu-item {
margin: 10px;
padding: 10px;
border: 1px solid black;
cursor: pointer;
}
.menu .sub-menu {
display: none;
margin-top: 10px;
}
.menu .sub-menu li {
margin: 10px;
}
.login-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.login-modal-content {
background-color: white;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 400px;
}
.login-modal-content button {
float: right;
}
.login-modal-content form label {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 10px;
}
.login-modal-content form input {
margin-bottom: 10px;
}
.login-modal-content form button {
margin-top: 20px;
}
```
JavaScript 代码:
```
var loginBtn = document.getElementById("loginBtn");
var closeBtn = document.getElementById("closeBtn");
var loginModal = document.querySelector(".login-modal");
loginBtn.onclick = function() {
loginModal.style.display = "block";
};
closeBtn.onclick = function() {
loginModal.style.display = "none";
};
var install = document.getElementById("install");
var subMenu = install.querySelector(".sub-menu");
var icon = install.querySelector(".icon");
install.onclick = function() {
if(subMenu.style.display === "none") {
subMenu.style.display = "block";
icon.innerHTML = "-";
} else {
subMenu.style.display = "none";
icon.innerHTML = "+";
}
};
```
代码中,首先通过文档对象模型(DOM)获取了登录按钮、关闭按钮、登录模态框、安装与注册列表项、折叠菜单和图标等元素。然后,分别为登录按钮和关闭按钮添加了点击事件,在点击时显示或隐藏登录模态框。为安装与注册列表项添加了点击事件,在点击时展开或收缩折叠菜单,并改变图标的内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)