Question

我想要完成的是让某个类的每个标题在它的另一个类的兄弟上调用'slide'方法（在这种情况下分别为'accordion_header'和'accordion_content'）。我的目标是课程，因为，这很有道理，对吗？

这是代码：

window.addEvent('domready', function() {
    console.log('trying to set click-on-header to open sib div\n');
    $$('.accordion_header').each.addEvent('click', function(e) {
        $('.accordion_content').slide('toggle');
    }); 
});

这是HTML。内容是无关紧要的，但所有这些'手风琴'的结构都是相同的：

<div id="itemOne">
    <div class="accoridon_header header_highlight">
        <h2 class="stripeToRight gradient">#</h2>
    </div>  <!-- end of accoridon_header -->    

    <div class="accordion_content">
        #
    </div>  <!-- end of accordion_content -->
</div>  <!-- end of itemOne -->

不用说，但可能应该，代码没有像我预期的那样运作。我错过了什么？

WR！

PS：我想在标题中添加/删除一个额外的类来表示状态......是否有快速方法？

Answer 1

好的，让我们说清楚一点：

elements.each.addEvent不正确，您可以直接在addEvent等集合上使用elements.addEvent。

window.addEvent('domready', function() {

    console.log('trying to set click-on-header to open sib div\n');

    $$('.accordion_header').addEvent('click', function(e) { 

          this.getParent().getElement('.accordion_content').slide('toggle'); //get accordion content

    });


});

demo here

如果您想在点击回调中添加/删除类，可以this.addClass('class')使用this.removeClass('class')，或者更好 - this.toggleClass('class')

P.S。在你的HTML上你有accoridon而不是手风琴;）

Answer 2

 $$('.accordion_header').each.addEvent(…

这个电话（或者更确切地说，缺乏）是你的问题。阅读documentation of each并实际调用 each方法，而不是尝试访问 addEvent each属性财产，当然不存在。

这将引导您进行如下调用：

 Array.each($$('.accordion_header'), function(currentHeader) {
      currentHeader.addEvent(…

MooTools：如何使用.each将事件添加到非子元素？

2 个答案: