UL LI点击正在隐藏UL

UL LI click is hiding the UL

本文关键字：UL 隐藏 LI      更新时间：2023-09-26

我正在尝试制作一个UL LI列表，这样当单击单词"list"时，LI元素就会显示出来，反之亦然。但是，如果单击LI，则整个列表将再次隐藏。我想这样做，如果点击LI，它不会隐藏我的列表，因为我想稍后添加LI点击的功能。

这是有问题的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
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() {
$('ul').click(function(){
     if ($('ul > li').css('display') == 'none') {
        $('ul > li').show();
    }
    else {
    $('ul > li').hide()
    }
});
}
</script>
</head>
<body>
<ul>
    List
    <li>1234</li>
    <li>5678</li>
    <li>0123</li>
</ul>

</body>
</html>

如上所述，不能像那样将文本粘贴在ul中。ul中应该只有li元素。更干净的方法是这样的，它显示并隐藏ul元素，而不是使用ul外部的控件隐藏其中的所有li。

正如下面所指出的，还有一种更好的方法来处理这一切，以确保您不会处理页面上的每个ul。通过使用类选择器和内置的jquery函数。

Fiddle：https://jsfiddle.net/erjfghf0/

HTML:

<a class="showHideLink">List</a>
<ul class="showHideList">
    <li>1234</li>
    <li>5678</li>
    <li>0123</li>
</ul>

JS:

$('.showHideLink').click(
    function (event) {
        $(this).next('.showHideList').toggle();
    }
);

CSS：

ul {
    display: none;
}

由于UL没有任何内容可呈现，由于所有LI都被隐藏，因此需要在其他内容上呈现事件操作。以下是我的建议：https://jsfiddle.net/Twisty/LL948r6f/

HTML

List (<a href="#" id='toggleLink'>Toggle</a>)
<ul>
  <li>1234</li>
  <li>5678</li>
  <li>0123</li>
</ul>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
ul li {
  display: none;
}
ul li:before {
  content: "- ";
}

JQuery

$(function() {
    $('#toggleLink, ul').click(function() {
        console.log("List Items display: " + $('ul li').css('display'));
        if ($('ul li').css('display') == 'none') {
            $('ul li').show();
        } else {
            $('ul li').hide();
        }
    });
});
相关文章：