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 on('show hide')中没有此类事件，可以添加这些自定义方法。

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

看看http://jsbin.com/debuticifo/edit?html,css,js,output