直接上代碼
<!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>在瀏覽器里就能看到頁面中的左邊列表有顯示和未顯示
點個贊再走唄~
)
)
)
