单击DIV时，如何切换UL列表

How do you toggle UL list when the DIV is clicked?

本文关键字：何切换 UL 列表 DIV 单击      更新时间：2023-09-26

单击div时，如何唯一切换UL列表？我正在尝试执行以下操作，但是切换方法出现错误。

这是有问题的代码：

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.select:hover {
    cursor: pointer;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
ul li {
    display: none;
}
ul li:before{ content:"- ";}
</style>
<script type="text/javascript">
window.onload = function() {
    $(".select").click(function() {
        $('ul').toggle();
    });

}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
    <ul>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
    <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>
</body>
</html>

您应该得到当前的div，使用选择器可以选择ul元素中的所有li元素，如下所示

$(".select").click(function() {
    $(this).find('ul li').toggle();
});

您在('ul').toggle();之前错过了$，您必须切换li而不是ul，因为您的li是隐藏的，而不是隐藏的ul。尝试如下。

$(".select").click(function () {
     $(this).find('ul li').toggle();
 });

   $(".select").click(function() {
        $('ul').toggle();
    });

你错过了ul之前的$。此外，我会通过类或id而不是html标记来引用它。此代码将引用页面中的所有UL，而不仅仅是目标

好的，我得到了结果：

window.onload = function() {
  $(".select").click(function() {
    $('#' + this.id + ' > ul > li').toggle();
  });
}
.select:hover {
  cursor: pointer;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
ul li {
  display: none;
}
ul li:before{ content:"- ";}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="select" id="numbers">Select Box1
    <ul>
        <li>1234</li>
        <li>5678</li>
        <li>0123</li>
    </ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
    <ul>
        <li>abcd</li>
        <li>efgh</li>
        <li>ijkl</li>
    </ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
    <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>oranges</li>
    </ul>
</div>

相关文章：