js模块目标类

Question

我是模块化JS的新手。我正在尝试将一个简单的类切换转换为一个模块，但我无法针对正确的LI。这会切换所有的箭头。

var toggleArrow = {
    init: function(){
        this.cacheDom();
        this.bindEvents();
        //this.render();
    },
    cacheDom: function(){
        this.$el = $('.has-accordion');
    },
    bindEvents: function(){
        this.$el.on('show hide',this.toggleAccordion.bind(this));
    },
    toggleAccordion: function(e){           
        this.$el.find('i').toggleClass('page-arrow-down');
    }
};
toggleArrow.init();
// spaguetti code being converted
// $('.collapsible').on("show", ".has-accordion", function(event){
//      $(this).find('i').addClass("page-arrow-down");
//  }); 
//  $('.collapsible').on("hide", ".has-accordion", function(event){
//      $(this).find('i').removeClass("page-arrow-down");
//  });

示例html

<ul>
<li class="has-accordion" data-toggle="collapse" data-target="#collapseOne">One<i class="page-arrow-next"></i>
 <ul id="collapseOne" class="collapse">
        <li>Item 1</li>
        <li>Item 2</li>
 </ul>
</li>
<li class="has-accordion" data-toggle="collapse" data-target="#collapseTwo">Two<i class="page-arrow-next"></i>
 <ul id="collapseTwo" class="collapse">
        <li>Item 1</li>
        <li>Item 2</li>
 </ul>
</li>
</ul>

Answer 1

在（"显示隐藏"）上的jquery中没有这样的事件，您可以添加这些自定义方法。

相反，您可以在打开的列表中添加一个类"open"，并可以使用css更改<i>样式。

看一看http://jsbin.com/debuticifo/edit?html，css，js，输出