jquery幻灯片切换功能问题 [英] jquery slide toggle function issue
本文介绍了jquery幻灯片切换功能问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
i使用jquery实现了slidetoggle功能
这里我的问题是当我第一次点击它不工作时。第二次点击它正在工作。
i我正在使用此代码
< br $>
$（ 文档）。ready（function（）{
var active = false ;
if （$（ ＃HiddenField1 ）。val（）== block）{
$ （ ＃FiltersliderDiv）。css（ display， none ）;
}
if （$（ #HiddenField1）。val（）== none）{
$（ ＃FiltersliderDiv）。css（ display， block）;
$（ ＃Filters）。css（' background-color'，' ＃0082AA'）;
$（ ＃MapAndChart）。css（' background-color'，' ＃0082AA'）;
$（ #Report）。css（' background-color'，' ＃0082AA'）;
}
$（ ＃Filters）。click（function（） {
if （active == false ）{
$ （ ＃FiltersliderDiv）。slideDown（ slow）;
$（ #ReportsliderDiv）。slideUp（ slow）;
$（ ＃MapAndChartsliderDiv）。slideUp（ slow）;
$（ ＃MapAndChart）。css（' background-color '，' Gray'）;
$（ ＃Filters）。css（' background-color'，' ＃0082AA'）;
$（ ＃Filters）。css（' fontcolor'，' ＃ 333333' ）;
$（ #Report）。css（' background-color'，' 灰色'）;
document.getElementById（ MapAndChart）。style.color = < span class =code-string> black;
document.getElementById（ 报告）。style.color = black;
document.getElementById（ 过滤器）。style.color = 白色;
active = true ;
}
else {
$（ ＃FiltersliderDiv）。slideUp（ slow）;
$（ ＃Filters）。css（' background-color'，' 灰色'）;
document.getElementById（ 过滤器）。style.color = black;
active = false ;
}
}）;
}）;
$（ document）。ready（function（）{
var active = false ;
if （$（ ＃HiddenField2）。val（）== block）{
$（ ＃MapAndChartsliderDiv）。css（ display， none）;
$（ ＃MapAndChart）。css（' background-color'，' Gray'）;
}
if （$（ ＃HiddenField2）。val（） == none）{
$（ ＃MapAndChartsliderDiv）。css（ display， block）;
}
$（ ＃MapAndChart）。点击（function（）{
if （active == false ）{
$（ ＃MapAndChartsliderDiv）。slideDown（< span class =code-string> slow）;
$（ ＃FiltersliderDiv）。slideUp（ slow ）;
$（ ＃ReportsliderDiv）。slideUp（< span class =code-string> slow）;
$（ ＃MapAndChart）。css（' background-color， ＃0082AA'）;
$（ ＃Filters）。css（' background-color'，' 灰色'）;
$（ #Report）。css（' background-color'，' 灰色'）;
document.getElementById（ MapAndChart）。style.color = < span class =code-string> White;
document.getElementById（ 报告）。style.color = black;
document.getElementById（ 过滤器）。style.color = black;
active = true ;
}
else {
$（ ＃MapAndChartsliderDiv）。slideUp（ slow）;
$（ ＃MapAndChart）。css（' background-color'，' 灰色'）;
document.getElementById（ MapAndChart）。style.color = black;
active = false ;
}
}）;
}）;
$（ document）。ready（function（）{
< span class =code-keyword> var active = false ;
if （$（ ＃HiddenField3）。val（）== block）{
$（ ＃ReportsliderDiv）。css（ display， none）;
$（ #Report）。css（' background-color'，' Gray'）;
}
if （$（ ＃HiddenField3）。val（）== none）{
$（ ＃ReportsliderDiv）。css（ display ， block）;
}
$（ #Report）。click（function（）{
if （active == false ）{
$（ ＃ReportsliderDiv）。slideDown（ slow）;
$（ ＃FiltersliderDiv）。slideUp（ slow）;
$（ ＃MapAndChartsliderDiv）。slideUp（ slow）;
$（ < span class =code-string>＃MapAndChart）。css（' background-color'< /跨度>， ' Gray'）;
$（ ＃Filters）。css（' background-color'，' 灰色'）;
$（ #Report）。css（' background-color'，' ＃0082AA'）;
document.getElementById（ MapAndChart）。style.color = < span class =code-string> black;
document.getElementById（ 报告）。style.color = 白色;
document.getElementById（ 过滤器）。style.color = black;
active = true ;
}
else {
$（ ＃ReportsliderDiv）。slideUp（ slow）;
$（ #Report）。css（' background-color'，' 灰色'）;
document.getElementById（ 报告）。style.color = black;
active = false ;
}
}）;
}）;
请与我分享任何想法。
解决方案
（ document）。ready（function（function（ ）{
var active = false ;
if （
（ ＃HiddenField1）。val（）== block）{
（ ＃FiltersliderDiv）。css（ display， none ）;
}
如果（
hii friends,
i implemented slidetoggle functions using jquery
here my issue is when i click first time it's not working.second time i click it's working.
i am using this code
$("document").ready(function () {
var active = false;
if ($("#HiddenField1").val() == "block") {
$("#FiltersliderDiv").css("display", "none");
}
if ($("#HiddenField1").val() == "none") {
$("#FiltersliderDiv").css("display", "block");
$("#Filters").css('background-color', '#0082AA');
$("#MapAndChart").css('background-color', '#0082AA');
$("#Report").css('background-color', '#0082AA');
}
$("#Filters").click(function () {
if (active == false) {
$("#FiltersliderDiv").slideDown("slow");
$("#ReportsliderDiv").slideUp("slow");
$("#MapAndChartsliderDiv").slideUp("slow");
$("#MapAndChart").css('background-color', 'Gray');
$("#Filters").css('background-color', '#0082AA');
$("#Filters").css('fontcolor', '#333333');
$("#Report").css('background-color', 'Gray');
document.getElementById("MapAndChart").style.color = "black";
document.getElementById("Report").style.color = "black";
document.getElementById("Filters").style.color = "White";
active = true;
}
else {
$("#FiltersliderDiv").slideUp("slow");
$("#Filters").css('background-color', 'Gray');
document.getElementById("Filters").style.color = "black";
active = false;
}
});
});
$("document").ready(function () {
var active = false;
if ($("#HiddenField2").val() == "block") {
$("#MapAndChartsliderDiv").css("display", "none");
$("#MapAndChart").css('background-color', 'Gray');
}
if ($("#HiddenField2").val() == "none") {
$("#MapAndChartsliderDiv").css("display", "block");
}
$("#MapAndChart").click(function () {
if (active == false) {
$("#MapAndChartsliderDiv").slideDown("slow");
$("#FiltersliderDiv").slideUp("slow");
$("#ReportsliderDiv").slideUp("slow");
$("#MapAndChart").css('background-color', '#0082AA');
$("#Filters").css('background-color', 'Gray');
$("#Report").css('background-color', 'Gray');
document.getElementById("MapAndChart").style.color = "White";
document.getElementById("Report").style.color = "black";
document.getElementById("Filters").style.color = "black";
active = true;
}
else {
$("#MapAndChartsliderDiv").slideUp("slow");
$("#MapAndChart").css('background-color', 'Gray');
document.getElementById("MapAndChart").style.color = "black";
active = false;
}
});
});
$("document").ready(function () {
var active = false;
if ($("#HiddenField3").val() == "block") {
$("#ReportsliderDiv").css("display", "none");
$("#Report").css('background-color', 'Gray');
}
if ($("#HiddenField3").val() == "none") {
$("#ReportsliderDiv").css("display", "block");
}
$("#Report").click(function () {
if (active == false) {
$("#ReportsliderDiv").slideDown("slow");
$("#FiltersliderDiv").slideUp("slow");
$("#MapAndChartsliderDiv").slideUp("slow");
$("#MapAndChart").css('background-color', 'Gray');
$("#Filters").css('background-color', 'Gray');
$("#Report").css('background-color', '#0082AA');
document.getElementById("MapAndChart").style.color = "black";
document.getElementById("Report").style.color = "White";
document.getElementById("Filters").style.color = "black";
active = true;
}
else {
$("#ReportsliderDiv").slideUp("slow");
$("#Report").css('background-color', 'Gray');
document.getElementById("Report").style.color = "black";
active = false;
}
});
});
please share any idea to me.
解决方案
("document").ready(function () { var active = false; if (
("#HiddenField1").val() == "block") {
("#FiltersliderDiv").css("display", "none"); } if (
这篇关于jquery幻灯片切换功能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
