UL LI单击隐藏了UL

Question

I am trying to make a UL LI list such that when the word "LIST" is clicked on, the LI elements will be displayed and vice-versa. 我试图制作一个UL LI列表，以便在单击单词“ LIST”时将显示LI元素，反之亦然。 However, if an LI is clicked on the entire list gets hidden again. 但是，如果单击一个LI，则整个列表将再次隐藏。 I'd like to make it such that if an LI is clicked on, it wont hide my list as I'd like to add functionality for the LI click later. 我想这样做，如果单击了一个LI，它不会隐藏我的列表，因为我想为以后单击的LI添加功能。

Here is the code in question: 这是有问题的代码：

<!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

As pointed out above you can't just stick text in a ul like that. 如上所述，您不能只将文字粘贴在这样的ul中。 A ul should only have li elements within it. ul只能包含li元素。 A cleaner approach is something like this that shows and hides the ul element instead of all the li s inside it with a control external to the ul . 一个更简洁的方法是这样的，用于显示和隐藏ul元素，而不是所有的li与外部控制的内线它ul 。

Also as pointed out below there is a much better way to handle this all to make sure you aren't dealing with every ul on the page. 另外，如下面所指出的，还有一种更好的方法来处理所有这些，以确保您不会处理页面上的每个ul 。 By using class selectors and the built in jquery functions. 通过使用类选择器和内置的jquery函数。

Fiddle: https://jsfiddle.net/erjfghf0/ 小提琴： https : //jsfiddle.net/erjfghf0/

HTML: HTML：

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

JS: JS：

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

CSS: CSS：

ul {
    display: none;
}

Answer 2

Since the UL has nothing to render, due to all the LI being hidden, you need to render the event action on something else. 由于所有的LI都被隐藏了，因此UL没有要渲染的内容，因此您需要在其他事件上渲染事件动作。 Here is my suggestion: https://jsfiddle.net/Twisty/LL948r6f/ 这是我的建议： https : //jsfiddle.net/Twisty/LL948r6f/

HTML HTML

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

CSS CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

ul li {
  display: none;
}

ul li:before {
  content: "- ";
}

JQuery 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 个解决方案

解决方案1
2 已采纳 2015-12-30 19:59:00

解决方案2
1 2015-12-30 20:09:20

UL LI单击隐藏了UL

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-12-30 19:59:00

解决方案2 1 2015-12-30 20:09:20

解决方案1
2 已采纳 2015-12-30 19:59:00

解决方案2
1 2015-12-30 20:09:20