1

我定义了以下 HTML 元素

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

当我单击其中一个元素时，应切换两者的可见性。我尝试了以下原型代码：

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

但它不起作用。我知道如果我使用 jQuery，一切都会简单得多，但不幸的是，这不是一个选项：

4

3 回答 3

4

您可以使用调用方法来绑定事件处理程序以及切换它们，而不是遍历集合中的所有箭头。这是一个例子：

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

演示：http: //jsfiddle.net/ddMn4/

于 2013-08-14T14:48:41.757 回答
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 回答
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());

就是这样，但是如果您利用两个 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 回答