1

Prototypeライブラリをサイトに追加してから、次のコードを追加します。しかし、スパンをクリックすると、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 : text oneをクリックすると、1 ul トグルが表示されます。クリックすると *テキスト 2 * 2 ul トグル、...

4

2 に答える 2

1

プロトタイプ$()とEvent.observe()関数の引数として CSS セレクターを使用しています。これらの関数はいずれもセレクターを受け入れません。どちらも代わりに要素 ID を期待しています。

$$()の代わりに使用$()して、セレクターを指定できます。これは、単一の要素だけでなく、拡張要素の配列を返すことに注意してください。

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

于 2013-03-17T17:43:21.517 に答える
0

$$複数の要素を選択してから、それらのそれぞれに対して監視を呼び出すようにしてください。

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();
        });
    });
});
于 2013-03-17T17:54:57.763 に答える