如何在单击DIV时切换UL列表?

时间:2016-01-08 17:39:16

标签: javascript jquery

如何在单击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>

4 个答案:

答案 0 :(得分:1)

您应该获取当前div并使用选择器,您可以选择li元素中的所有ul元素,如下所示

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

好的,我得到了结果:

    do {
        var rsrc: AnyObject?
        try element.getResourceValue(&rsrc, forKey: NSURLIsDirectoryKey)
        if let number = rsrc as? NSNumber {
            if number == true {
                // do something
            }
        }
    } catch {
    }
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:"- ";}

相关问题