Question

我正在尝试制作一个UL LI列表，以便在单词＆＃34; LIST＆＃34;单击，将显示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>

Answer 1

正如上面所指出的，你不能只在ul这样的文章中粘贴文字。 ul应该只有li个元素。更清晰的方法就是这样，使用ul外部的控件显示和隐藏li元素而不是其中的所有ul元素。

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

小提琴：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;
}

Answer 2

由于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();
        }
    });
});

UL LI点击隐藏了UL

2 个答案: