Question

我有一个代码段，它有css，javascript和html。

这是完整的代码

＆＃13;

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

＆＃13;

这是我要求你解释的javascript代码

＆＃13;

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

＆＃13;

我的问题是


来自上面的javascript代码，＆＃34; e＆＃34;在函数（e）中，以及将输入到＆＃34; e＆＃34;来自？

如何将上面的javascript代码转换为函数？，我一直都是   尝试这个

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

但它没有用

更新

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

＆＃13;

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

＆＃13;

感谢队友^^

Answer 1

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（'＆gt; ul＆gt; 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

Answer 2

该片段是jQuery，而不是纯粹的javascript。包装器，

$(function () {
...
});

确保页面在执行之前已完成加载DOM。在附加事件处理程序时，这是必需的，如此代码段所示：

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

附加＆＃34; onclick＆＃34;所有列表项的事件处理程序，其父类为＃34;树＆＃34;。＆＃34; e＆＃34;参数是指触发事件的元素。

其余的是基本的jQuery DOM操作。

我真的不明白你的意思＆＃34;转换为一个功能＆＃34;。此代码段设置了一个事件处理程序，它是您执行过一次的操作。为什么需要将其转换为函数？除非您正在谈论将其转换为纯粹的javascript函数，这是完全不同的。

Answer 3

＆＃39; e＆＃39;来自＆＃39; click＆＃39;事件.. 点击目标

如果你想让脚本成为一个函数，你可以做这样的事情。

<script>
$('.tree li').on('click', function (e) {
        showHide(e);
        e.stopPropagation();
});

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

Answer 4

来自上面的javascript代码，＆＃34; e＆＃34;在功能（e）中，以及将输入＆＃34; e＆＃34;来自？

e是event对象的别名变量，它具有提供有关事件类型，触发元素的目标元素和其他信息的信息的属性

如何将上面的javascript代码转换为函数？，我一直都是尝试这个

示例中的代码段使用的是jQuery JavaScript库。 $只是包含该库后在JS中创建的jQuery全局对象的另一个别名。

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

在这里，您只是定义一个函数，您需要将它实际绑定到某个事件，在click元素的li上。当您在showHide中使用$和其他jQuery API时，您需要使用jQuery来绑定您提到的事件处理程序

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

如果您可以在纯JS中的showHide（）中编写代码，那么您可以在某个元素上附加事件

document.getElementById('myLi').addEventListener('click', showHide, false);

需要解释javascript代码

4 个答案: