本文主要是介绍小demo - 列表hide or not (含代码)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
直接上代码
<!DOCTYPE html>
<html><head><style>.menu {width: 220px;height: 800px;border: 1px solid #dddddd;}.item {cursor: pointer;}.menu .header {padding: 10px 5px;background-color: goldenrod;}.menu .content a {display: block;padding: 5px;border-bottom: 1px solid #dddddd;}.hide {display: none;}</style></head><body><div class="menu"><div class="item"><div class="header" onclick="showMe(this)">EXAMPLE_ONE</div><div class="content hide"><a>1</a><a>2</a><a>3</a><a>4</a></div></div><div class="item"><div class="header" onclick="showMe(this)">EXAMPLE_TWO</div><div class="content hide"><a>5</a><a>6</a><a>7</a><a>8</a></div></div><div class="item"><div class="header" onclick="showMe(this)">EXAMPLE_THREE</div><div class="content hide"><a>9</a><a>10</a><a>11</a><a>12</a></div></div></div><script src="js/jquery-3.7.1.min.js"></script><script>function showMe(self) {$(self).next().removeClass('hide');$(self).parent().siblings().find('.content').addClass('hide')}</script></body>
</html>在浏览器里就能看到页面中的左边列表有显示和未显示
点个赞再走呗~
这篇关于小demo - 列表hide or not (含代码)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
