为什么javascript切换代码不能工作

why the javascript toggle code doesn't work?

本文关键字：不能 工作 代码 javascript 为什么      更新时间：2023-09-26

我已经将Prototype库添加到我的站点，然后添加以下代码。但是当我单击span时，ul内容不会被隐藏。链接仍然有效。

Event.observe(window, 'load', function() {
    Event.observe('.block-category li.parent span', 'click', function(e){
        $('.block-category li.parent ul').toggle();
        e.preventDefault();
    });
});
html: 

    <div class="block block-category">
    <li class="level-top  parent">
    <a href="example.com/...."><span>text one</span></a>
    <ul> //the 1 ul
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    </ul>
    </li>
    <li class="level-top"><a href="..."><span>....</span></a></li>

  <li class="level-top  parent">
    <a href="example.com/...."><span>text two</span></a>
    <ul> //the 2 ul
    <li><a><span>....</span></a></li>
    </ul>
    </li>
  <li class="level-top  parent">
    <a href="example.com/...."><span>text three</span></a>
    <ul>
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    </ul>
    </li>
    </div>

谢谢。

ps:当单击文本1 时，将1 ul切换。当点击*文本两个*的2个ul切换，…

您正在使用CSS选择器作为Prototype的$()和Event.observe()函数的参数。这两个函数都不接受选择器。它们都需要元素id。

您可以使用$$()代替$()，并给它一个选择器。注意，这将返回一个扩展元素数组，而不仅仅是一个元素。

http://api.prototypejs.org/dom/Event/observe/
http://api.prototypejs.org/dom/dollar/
http://api.prototypejs.org/dom/dollar-dollar/

您应该尝试$$选择多个元素，然后为每个元素调用observe:

Event.observe(window, 'load', function() {
    $$('.block-category li.parent > a span').each(function (element) {
        element.observe('click', function (e) {
            e.element().up().next('ul').toggle();
            e.preventDefault();
        });
    });
});
相关文章：