1

次の HTML 要素を定義しました

<span class="toggle-arrow">▼&lt;/span>
<span class="toggle-arrow" style="display:none;">▶&lt;/span>

要素の 1 つをクリックすると、両方の表示を切り替える必要があります。次のプロトタイプコードを試しました：

$$('.toggle-arrow').each(function(element) {
    element.observe('click', function() {
        $(element).toggle();
    });
});

しかし、うまくいきません。jQueryを使用すればすべてがはるかに簡単になることはわかっていますが、残念ながらこれはオプションではありません:

4

3 に答える 3

4

コレクション内のすべての矢印を反復処理する代わりに、invokeメソッドを使用して、イベント ハンドラーをバインドしたり、それらを切り替えたりできます。次に例を示します。

var arrows = $$('.toggle-arrow');
arrows.invoke("observe", "click", function () {
    arrows.invoke("toggle");
});

デモ: http://jsfiddle.net/ddMn4/

于 2013-08-14T14:48:41.757 に答える
0

カフから:

function toggleArrows(e) {
  e.stop();

  // first discover clicked arow
  var clickedArrow = e.findElement();

// second hide all arrows
  $$('.toggle-arrow').invoke('hide');

// third find arrow that wasn't clicked
  var arw = $$('.toggle-arrow').find(function(a) {
    return a.identify() != clickedArrow.identify();
  });

// fourth complete the toggle
  if(arw)
     arw.show();

}

このように、ドキュメントがロードされたイベントでトグル矢印機能を配線します

document.on('click','.toggle-arrow', toggleArrows.bindAsEventListener());

それだけですが、矢印と矢印選択の 2 つの CSS クラスを利用すると、より多くの成功を収めることができます。次に、これらのクラス名を使用してセレクターを簡単に記述し、非表示/表示の「トグル」を次のように呼び出すことができます。

function toggleArrows(e) {
    e.stop();

    $$('.toggle-arrow').invoke('hide');
    var arw = $$('.toggle-arrow').reject(function(r) { 
        r.hasClassName('arrow-selected'); });

    $$('.arrow-selected').invoke('removeClassName', 'arrow-selected');

    arw.show();
    arw.addClassName('arrow-selected');

}
于 2013-08-16T22:20:18.850 に答える
0

これはあなたが求めているものではないことは承知していますが、次のようなことを検討してください。

<div class="toggle-arrow-container">
    <span class="toggle-arrow" style="color: pink;">▶&lt;/span>
    <span class="toggle-arrow" style="display:none; color: orange;">▶&lt;/span>
</div>

document.on('click', '.toggle-arrow-container .toggle-arrow', function(event, el) {
    var buddies = el.up('.toggle-arrow-container').select('.toggle-arrow');
    buddies.invoke('toggle');
});

これにより、ページに複数の「トグル セット」を含めることができます。フィドルをチェックしてください: http://jsfiddle.net/nDppd/

これがプロトタイプの冒険に役立つことを願っています。

于 2013-08-14T18:56:59.243 に答える