javascript - 需要javascript代码的解释

标签 javascript jquery html css

我有一个代码片段，其中包含 css、javascript 和 html。

这是完整的代码

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bootstrap-3.2.0.min.css">
<style>
.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}
.tree li::before {
    content:'';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after {
    content:'';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
/*Remove connectors before root*/
 .tree > ul > li::before, .tree > ul > li::after {
    border: 0;
}
/*Remove connectors after last child*/
 .tree li:last-child::before {
    height: 30px;
}
/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/
 .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}
</style>
<script src="http://snipplicious.com/js/jquery.js"></script>
<script src="http://snipplicious.com/js/bootstrap.min.js"></script>
<script>$(function () {
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });
});</script>
</head>
<body>
<div class="container">
  <h1>Bootstrp tree view - click to hide</h1>
  <div class="tree">
    <ul>
      <li>
        <a href="#">Parent</a>
        <ul>
          <li>
            <a href="#">Child</a>
            <ul>
              <li>	<a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Child</a>
            <ul>
              <li><a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
                <ul>
                  <li>	<a href="#">Great Grand Child</a>
                  </li>
                  <li>	<a href="#">Great Grand Child</a>
                  </li>
                  <li>	<a href="#">Great Grand Child</a>
                  </li>
                </ul>
              </li>
              <li><a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

这是我请你解释的javascript代码

<script>$(function () {
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });
});</script>

my question are

  1. from javascript code on above, what the value of "e" in function(e), and where the value which will input into "e" come from?
  2. how to convert javascript code on above to a function?, i have been trying this
function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    e.stopPropagation(); }

but it didnt work

更新

这是我跟随 Ze Rubeus 和 A.Wollff 之后的代码

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}
.tree li::before {
    content:'';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after {
    content:'';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
/*Remove connectors before root*/
 .tree > ul > li::before, .tree > ul > li::after {
    border: 0;
}
/*Remove connectors after last child*/
 .tree li:last-child::before {
    height: 30px;
}
/*Time for some hover effects*/

/*We will apply the hover effect the the lineage of the element also*/
 .tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}
</style>
<script src="jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    

    function showHide(e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    }
    
    $('.tree li').on('click', showHide);
    
//$(function () {
//    
//    
//    $('.tree li').on('click', function (e) {
//        var children = $(this).find('> ul > li');
//        if (children.is(":visible")) children.hide('fast');
//        else children.show('fast');
//        e.stopPropagation();
//    });
//});
</script>
</head>
<body>
<div class="container">
  <h1>Bootstrp tree view - click to hide</h1>
  <div class="tree">
    <ul>
        <li >
        <a href="#">Parent</a>
        <ul>
            <li >
            <a href="#">Child</a>
            <ul>
              <li>	<a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
          <li >
            <a href="#">Child</a>
            <ul>
              <li><a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
                <ul>
                    <li >	<a href="#">Great Grand Child</a>
                  </li>
                  <li >	<a href="#">Great Grand Child</a>
                  </li>
                  <li >	<a href="#">Great Grand Child</a>
                  </li>
                </ul>
              </li>
              <li ><a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

谢谢同学^^

最佳答案

e 可用于获取有关点击的特定信息(左、右或中心；点击的坐标；点击的 DOM 对象)，这是一个 Jquery 语法，而不是 Javascript 

  <script>$(function () {
        $('.tree li').on('click', function (e) {
            var children = $(this).find('> ul > li');
            if (children.is(":visible")) children.hide('fast');
            else children.show('fast');
            e.stopPropagation();
        });
    });</script>

对于第二个问题，这不是 JavaScript 语法($(this).find('> ul > li');):

function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    e.stopPropagation(); }

任何方式，即使它是 JS 语法，您也需要像这样调用您的函数并为 e 赋值，但这不会影响您的代码:

showHide(e);

或者您可以使用如下所示的 IIFE(立即调用的函数表达式):

(function(){
  var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation(); } 
}(e));

使用上面的代码调整您的功能的其他解决方案:

$(function () {
    $('.tree li').on('click', showHide);
});

function showHide(e) {
    var children = $(this).find('> ul > li');
    if (children.is(":visible")) children.hide('fast');
    else children.show('fast');
    return false;
}

LIVE DEMO

关于javascript - 需要javascript代码的解释，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28913684/

上一篇：用于检索 span 元素内容的 JavaScript

下一篇：javascript - 如何在 jquery 中显示 "no result found"列表搜索？

相关文章：

javascript - CckEditor 不会销毁实例

javascript - 如何使用 Immutability Helpers 推送数组中的第一个元素

javascript - 如何向 A 元素添加点击监听器

javascript - 如何让 w3schools 自己尝试编辑？

javascript - 如何在同一域上的 IE8 中访问嵌套框架的 location.href ？

javascript - 如何在不输入的情况下发送用户名和密码？

jquery - 如何通过 JQuery 查找和禁用按钮

javascript - 我的提交按钮不起作用

jquery多个条件

javascript - Col Span Split For First td cell with table header 表格标题

©2024 IT工具网  联系我们