Fatal编程技术网
  • javascript/
  • Javascript UL LI click正在隐藏UL

Javascript UL LI click正在隐藏UL

javascript jquery

Javascript UL LI click正在隐藏UL,javascript,jquery,Javascript,Jquery,我试图制作一个UL LI列表，这样当点击“列表”一词时，LI元素就会显示出来，反之亦然。但是，如果单击某个LI，整个列表将再次隐藏。我想让它这样，如果一个LI被点击，它不会隐藏我的列表，因为我想添加功能的LI点击以后 以下是相关代码： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

我试图制作一个UL LI列表，这样当点击“列表”一词时，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>


保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
光标：指针；
}
ulli{
显示：无；
}
ul li:在{内容：“-”；}之前
window.onload=函数（）{
$（'ul'）。单击（函数（）{
如果（$（'ul>li'）.css（'display'）='none'）{
$（'ul>li'）.show（）；
}
否则{
$（'ul>li'）.hide（）
}
});
}

    
列表

  • 1234
    • 

  • 5678
    • 

  • 0123
    •
如上所述，您不能像那样在
ul
中粘贴文本。
ul
中应仅包含
li
元素。更简洁的方法是这样的，它显示并隐藏
ul
元素，而不是它内部的所有
li
，并且在
ul
外部有一个控件

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

小提琴：

HTML:

CSS:

如上所述，您不能像那样将文本粘贴在
ul
中。
ul
中应仅包含
li
元素。更简洁的方法是这样的，它显示并隐藏
ul
元素，而不是它内部的所有
li
，并且在
ul
外部有一个控件

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

小提琴：

HTML:

CSS:

由于UL没有要渲染的内容，由于所有LI都被隐藏，因此需要在其他对象上渲染事件操作。以下是我的建议：

HTML

List（）

    

  • 1234
    • 

  • 5678
    • 

  • 0123
    •
CSS

ul{
列表样式类型：无；
保证金：0；
填充：0；
光标：指针；
}
ulli{
显示：无；
}
李：以前{
内容：“-”；
}
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都被隐藏，因此需要在其他对象上渲染事件操作。以下是我的建议：

HTML

List（）

    

  • 1234
    • 

  • 5678
    • 

  • 0123
    •
CSS

ul{
列表样式类型：无；
保证金：0；
填充：0；
光标：指针；
}
ulli{
显示：无；
}
李：以前{
内容：“-”；
}
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();
        }
    });
});
这是无效的html，直接进入
    或
    的唯一内容是
    • 。另外，
    $（'ul>li'）
    选择所有'ul'元素中的所有
    li
    元素，因此您需要编辑选择器以仅选择要隐藏的元素/show@PatrickEvans我想你的意思是
    ul
    或
    ol
    中唯一的东西是
    li
    @Twisty，我是这么认为的，作为一个例子加以纠正会起作用。正如其他人所说，您的HTML是不正确的。或者使用
    切换
    ，在你的CSS中，你隐藏了所有的
    li
    ，为什么？那是无效的html，直接进入
        或
        的唯一东西是
      • 。另外，
        $（'ul>li'）
        选择所有'ul'元素中的所有
        li
        元素，因此您需要编辑选择器以仅选择要隐藏的元素/show@PatrickEvans我想你的意思是
        ul
        或
        ol
        中唯一的东西是
        li
        @Twisty，我是这么认为的，作为一个例子加以纠正会起作用。正如其他人所说，您的HTML是不正确的。或者使用
        toggle
        ，在CSS中，你隐藏了所有
        li
        ，为什么？这会隐藏所有
        li
        元素中的所有
        ul
        元素，你的代码与OP的问题相同，你使用了错误的选择或者你是对的。我修好了。这是因为我复制并粘贴了代码=OIt仍然不可能是op想要的，因为您现在只是隐藏了所有ul，因为ul是锚元素的同级元素，您可以执行
        $（this）.sibling（“ul”）.first（）
        ，或者给列表一个id并以这种方式选择它。在这一点上，我只是指出了如何以不同的方式执行此操作。这没有错。我不打算在这篇文章中解释选择器。这是一个展示和隐藏ul的例子。他们的代码和上面的代码是否需要改进。对我会在生产中使用此代码吗。否。它是否显示了如何在ul中没有自由浮动文本，以及如何在单击时隐藏和显示ul。是。
        css（）
        将只检查列表中的第一个
        li
        。您可以在
        ul
        上使用jQuery的
        toggle（）
        函数：这会将所有
        li
        元素隐藏在所有
        ul
        元素中，您的代码与OP的问题相同您使用了错误的选择或您是对的。我修好了。这是因为我复制并粘贴了代码=OIt仍然不可能是op想要的，因为您现在只是隐藏了所有ul，因为ul是锚元素的同级元素，您可以执行
        $（this）.sibling（“ul”）.first（）
        ，或者给列表一个id并以这种方式选择它。在这一点上，我只是指出了如何以不同的方式执行此操作。这没有错。我不打算在这篇文章中解释选择器。这是一个展示和隐藏ul的例子。他们的代码和上面的代码是否需要改进。对我会在生产中使用此代码吗。否。它是否显示了如何在ul中不包含自由浮动文本以及如何隐藏

        ul {
    display: none;
}

        

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