我的代码有一个问题，我很困惑为什么会这样！这是怎么回事：
我有几列（具有“ col-1-2”类），它们为on（mouseup）事件分配了一个函数（miniPage），无论您单击哪个，其宽度都会扩展，其他列会折叠并循环单击其他列继续。 我想从扩展列中删除事件侦听器，而是在此列内将另一个函数（miniPage2）分配给按钮元素（带有“号召性用语”类）。 我为两个类（“ col-1-2”和“号召性用语”）分别添加了两个具有各自功能的事件监听器，然后在函数内部管理监听器。除非不将miniPage2添加到我的代码中，否则我的代码工作正常，但是当我添加miniPage2时，它以某种方式不起作用，并且即使miniPage不应该这样做，似乎两个函数（miniPage和miniPage2）也将起作用。这是我的代码：
$(function() {
var isDragging = false;
$(".col-1-2").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage(this.id);}
})
});
$(function() {
var isDragging = false;
$(".call-to-action").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage2();}
})
});
function miniPage(activeTab) {
var arz;
arz = $(".col-1-2");
var elmnt = $("#" + activeTab);
var isDragging = false;
if (elmnt.prop('style')['width'] != "80%") {
arz.animate({width: "20%"},{ duration: 2000, queue: false });
elmnt.animate({width: "80%"},{ duration: 2000, queue: false });
arz.off("mousedown mousemove mouseup").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage(this.id);}
})
elmnt.off("mousedown mousemove mouseup");
} else {
arz.animate({width: "50%"},{ duration: 2000, queue: false });
}
}
}
function miniPage2() {
var arz;
arz = $(".col-1-2");
arz.animate({width: "50%"},{ duration: 2000, queue: false });
arz.off("mousedown mousemove mouseup").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage(this.id);}
})
}
}
$(function() {
var isDragging = false;
$(".col-1-2").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage(this.id);}
})
});
$(function() {
var isDragging = false;
$(".call-to-action").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage2();}
})
});
function miniPage(activeTab) {
var arz;
arz = $(".col-1-2");
var elmnt = $("#" + activeTab);
var isDragging = false;
if (elmnt.prop('style')['width'] != "80%") {
arz.animate({width: "20%"},{ duration: 2000, queue: false });
arz.removeClass("showContent hideContent");
arz.addClass("hideFeature miniPage");
elmnt.removeClass("hideFeature miniPage");
elmnt.addClass("hideContent");
elmnt.animate({width: "80%"},{ duration: 2000, queue: false });
elmnt.delay(2000).queue(function(){elmnt.addClass("showContent").dequeue();});
arz.off("mousedown mousemove mouseup").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage(this.id);}
})
elmnt.off("mousedown mousemove mouseup");
} else {
arz.animate({width: "50%"},{ duration: 2000, queue: false });
arz.removeClass("showContent");
arz.delay(2000).queue(function(){arz.removeClass("hideFeature hideContent").dequeue();});
}
}
function miniPage2() {
var arz;
arz = $(".col-1-2");
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var isDragging = false;
arz.animate({width: "50%"},{ duration: 2000, queue: false });
arz.removeClass("showContent");
arz.delay(2000).queue(function(){arz.removeClass("hideFeature hideContent").dequeue();});
arz.off("mousedown mousemove mouseup").on("mousedown", function() {
$(window).on("mousemove", function() {
isDragging = true;
$(window).off("mousemove")
})
})
.on("mouseup", function() {
var wasDragging = isDragging;
isDragging = false;
$(window).off("mousemove");
if (!wasDragging) {miniPage(this.id);}
})
}.col-1-2 {
width: 50%;
height: 200px;
display: inline-block;
}
#id1 {
background-color: red;
}
#id2 {
background-color: blue;
}
.call-to-action {
display: none;
padding: 20px;
background-color: white;
border: solid 1px black;
}
.col-1-2.showContent .call-to-action {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div style="width: 100%">
<div id="id1" class="col-1-2">
<div class="call-to-action">
test
</div>
</div>
<div id="id2" class="col-1-2">
<div class="call-to-action">
test
</div>
</div>
</div>
</body>
P.S1：这里的主要问题是我的miniPage在不应该触发时触发（当我单击按钮时，首先触发miniPage2，然后触发miniPage2），我知道这很好，因为如果我评论miniPage2，它将不会触发了，什么也不做，但是以某种方式添加miniPage2时，某些东西会坏掉，我不知道它是什么，为什么呢？我很困惑，任何帮助将不胜感激！ <3
P.S2：尝试忽略错别字，我试图缩小代码，所以也许我错过了一些东西。
答案 0 :(得分：0)
MainPage2为什么arz引用.col-1-2而不是.call-to-action
此外，在您的.off事件中，清除arz和elmnt