Web Front-end
JS Tutorial
Javascript method to control list closing and expansion through overflow_javascript skills
Javascript method to control list closing and expansion through overflow_javascript skills
The example in this article describes how Javascript controls the closing and expansion of lists through overflow. Share it with everyone for your reference. The specific implementation method is as follows:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过overflow控制列表闭合展开</title>
<style type="text/css">
div dl
{
margin:0;
padding:0;
font-size:14px;
}
#divMain
{
width:500px;
background-color:#22477A;
margin:0 auto;
margin-top:30px;
}
dl
{
width:200px;
background:#A6BCE5;
height:14px; /*和字体大小一样高*/
overflow:hidden; /*默认溢出隐藏*/
}
dt
{
cursor:pointer; /*设置手型光标*/
font-weight:bold;
color:Green;
}
.open
{
height:112px;
overflow:visible;
}
.close
{
height:14px; /*和字体大小一样高*/
overflow:hidden;
}
</style>
<script type="text/javascript">
function DisplayList() {
var dtNode = window.event.srcElement;
var dlNode = dtNode.parentNode;
var dlNodes = document.getElementsByTagName("dl");
for (var i = 0; i < dlNodes.length; i++) {
if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl
if (dlNodes[i].className == "open") {
dlNodes[i].className = "close";
}
else {
dlNodes[i].className = "open";
}
}
else {
dlNodes[i].className = "close";
}
}
}
</script>
</head>
<body>
<div id="divMain">
<dl>
<dt onclick="DisplayList()">
球星列表1
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表2
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表3
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表4
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表5
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表6
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
</div>
</body>
</html>I hope this article will be helpful to everyone’s JavaScript programming design.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Is H5 page production a front-end development?
Apr 05, 2025 pm 11:42 PM
Yes, H5 page production is an important implementation method for front-end development, involving core technologies such as HTML, CSS and JavaScript. Developers build dynamic and powerful H5 pages by cleverly combining these technologies, such as using the <canvas> tag to draw graphics or using JavaScript to control interaction behavior.
The latest price of Bitcoin in 2018-2024 USD
Feb 15, 2025 pm 07:12 PM
Real-time Bitcoin USD Price Factors that affect Bitcoin price Indicators for predicting future Bitcoin prices Here are some key information about the price of Bitcoin in 2018-2024:
How to customize the resize symbol through CSS and make it uniform with the background color?
Apr 05, 2025 pm 02:30 PM
The method of customizing resize symbols in CSS is unified with background colors. In daily development, we often encounter situations where we need to customize user interface details, such as adjusting...
Why are the inline-block elements misaligned? How to solve this problem?
Apr 04, 2025 pm 10:39 PM
Regarding the reasons and solutions for misaligned display of inline-block elements. When writing web page layout, we often encounter some seemingly strange display problems. Compare...
How to control the top and end of pages in browser printing settings through JavaScript or CSS?
Apr 05, 2025 pm 10:39 PM
How to use JavaScript or CSS to control the top and end of the page in the browser's printing settings. In the browser's printing settings, there is an option to control whether the display is...
How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter?
Apr 04, 2025 pm 11:45 PM
How to achieve the 45-degree curve effect of segmenter? In the process of implementing the segmenter, how to make the right border turn into a 45-degree curve when clicking the left button, and the point...
The text under Flex layout is omitted but the container is opened? How to solve it?
Apr 05, 2025 pm 11:00 PM
The problem of container opening due to excessive omission of text under Flex layout and solutions are used...
How to achieve segmentation effect with 45 degree curve border?
Apr 04, 2025 pm 11:48 PM
Tips for Implementing Segmenter Effects In user interface design, segmenter is a common navigation element, especially in mobile applications and responsive web pages. ...
