我正在尝试构建一个可以显示某些内容的切换div。我的代码如下:
家长视图
/*global define:true */
define([
"jquery",
"backbone",
"bootstrap",
"BaseView",
"view/money/inc/toggleHoldSection"
],
function ($, Backbone, Bootstrap, BaseView, ToggleHoldSection) {
"use strict";
var moneyView = BaseView.extend({
el: "#moneyPage",
template: "/public/templates/index.dust"
events: {
'click #click-to-toggle': 'toggleHoldSection'
},
initialize: function () {
this.showmeState = true;
},
toggleHoldSection: function (evt) {
evt.preventDefault();
console.log('this.showmeState', this.showmeState);
var view = new ToggleHoldSection();
if (view && this.showmeState === false) {
console.log("in if condition");
this.$el.find('toggle-div-content').show();
this.showmeState = true;
view.render();
}
else{
console.log("in else part", this.showmeState);
if (view && this.showmeState === true) {
console.log("in else if");
this.$el.find('toggle-div-content').hide();
this.showmeState = false;
view.render();
}
}
}
});
return moneyView;
});
子视图
define([
'jquery',
'backbone',
'BaseView',
],
function ($, BackBone, BaseView){
'use strict';
return BaseView.extend({
el:'#click-to-toggle',
template:'money/inc/messages',
initialize: function () {
},
beforeRender: function () {
},
})
})
粉尘页
<div id="click-to-toggle" class="modal-inner-box mobile-specific-holdsection" >
<span class="icon icon-arrow-up-small modal-caret-up"></span>
<div class="toggle-div-content">
<p>hidden section mobile specific</p>
</div>
</div>
上面的问题是我没有看到div的适当行为;它不会切换,而是显示一次然后没有任何反应。
有人可以帮我吗?
答案 0 :(得分:3)
this.$el.find('toggle-div-content')...
应该是
this.$el.find('.toggle-div-content')...