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中没有这样的事件（'show hide'），你可以添加这些自定义方法。

相反，您只需将“打开”类添加到打开的列表中，就可以使用css更改<i>样式。

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

js模块目标类

1 个答案: