如何在幻灯片切换功能中找到滑动并使用jquery向下滑动 [英] how to find out in slide toggle function slide up and slide down using jquery

问题描述

hii，

i基于按钮点击实现了三个slidetoggle功能。

例如，如果用户点击button1第一个div将打开剩余将是hide.if用户点击第二个按钮div2将打开剩余将隐藏，第三个工作像听众一样





这里我的问题是当用户点击button1 div1是打开的那个时间按钮背景颜色，再次点击相同的按钮div将隐藏它的早期颜色，在这个时间button2，button3也一样。



i我正在使用这个java脚本代码< br $>

hii,
i implemented three slidetoggle function based on button click.
for example if user click button1 first div will open remaining will be hide.if user click second button div2 will open remaining will hide,third one work like same like earler


here my issue is when user click button1 div1 is open thats time button background color,again click same button div will hide that's it's take earlier color,inthis time button2,button3 also works same.

i am using this java script code

$("document").ready(function () {

      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 () {



              $("#MapAndChartsliderDiv").slideUp("slow");
              $("#FiltersliderDiv").slideToggle("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";



      });
  });

  $("document").ready(function () {
      var val1 = 0;
      if ($("#HiddenField2").val() == "block") {
          $("#MapAndChartsliderDiv").css("display", "none");
          $("#MapAndChart").css('background-color', 'Gray');
      }
      if ($("#HiddenField2").val() == "none") {
          $("#MapAndChartsliderDiv").css("display", "block");

      }
            }
    $("#MapAndChart").click(function () {



                      $("#FiltersliderDiv").slideUp("slow");
                      $("#ReportsliderDiv").slideUp("slow");
                      $("#MapAndChartsliderDiv").slideToggle("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";

      });
  });
  $("document").ready(function () {

      if ($("#HiddenField3").val() == "block") {
          $("#ReportsliderDiv").css("display", "none");
          $("#Report").css('background-color', 'Gray');

      }
      if ($("#HiddenField3").val() == "none") {
          $("#ReportsliderDiv").css("display", "block");

      }
      $("#Report").click(function () {
          $("#FiltersliderDiv").slideUp("slow");
          $("#MapAndChartsliderDiv").slideUp("slow");
          $("#ReportsliderDiv").slideToggle("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";
      });
  });

推荐答案

（ document）。ready（function（）{

if （

("document").ready(function () { if (

（ ＃HiddenField1）。val（）== block）{

("#HiddenField1").val() == "block") {

（ ＃FiltersliderDiv）。css（ display， none）;

}
if （

("#FiltersliderDiv").css("display", "none"); } if (

这篇关于如何在幻灯片切换功能中找到滑动并使用jquery向下滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！