為什么JavaScript切換代碼不起作用？

Question

我已將原型庫添加到我的站點，然后添加以下代碼。 但是當我單擊范圍時，ul內容不會被隱藏。 鏈接href仍然有效。

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 ：單擊文本一時 ，將1ul切換。 當單擊* 文本兩個 * 2 ul切換時，...

Answer 1

您將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/

Answer 2

您應該嘗試$$選擇多個元素，然后為每個元素調用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();
        });
    });
});