jquery幻灯片切换功能问题

本文介绍了jquery幻灯片切换功能问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 朋友们， i使用jquery实现了slidetoggle功能 这里我的问题是当我第一次点击它不工作时。第二次点击它正在工作。 i我正在使用此代码

$（ 文档）。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 = 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（ slow）; $（ ＃FiltersliderDiv）。slideUp（ slow ）; $（ ＃ReportsliderDiv）。slideUp（ slow）; $（ ＃MapAndChart）。css（' background-color， ＃0082AA'）; $（ ＃Filters）。css（' background-color'，' 灰色'）; $（ #Report）。css（' background-color'，' 灰色'）; document.getElementById（ MapAndChart）。style.color = 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（）{ 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'，' 灰色'）; $（ #Report）。css（' background-color'，' ＃0082AA'）; document.getElementById（ MapAndChart）。style.color = 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 (