Question

因此，对于我在jquery中的slidetoggle函数，当网站运行时，我试图最初隐藏我的社交网站，使其不显示在“联系人”下。当我单击联系人时，我想让社交对象在导航菜单下滑动（最好是在联系人按钮右侧，如果有人知道该怎么做，我将不胜感激，否则就可以了）。第一次单击联系人时，社交显示，但jquery使它们向上滑动。之后该功能可以正常工作，但是我试图弄清楚如何使其第一次向下滚动而不是向上滚动，此后切换功能仍然有效。我对jquery还是陌生的，因此将不胜感激。

这是我的代码（jquery在html下方）：

    <!DOCTYPE html>
<html lang="en">
   <head>
      <title>RE</title>
      <meta charset="UTF-8">
      <!--UTF = Universal Character Set + Transformation Format. This encodes every character with the ASCII format (EX: 'A' = 65, 'B' = 66, etc.). Encoding is variable length, and uses 8-bit code units.-->
      <link rel="stylesheet" href="CSS/style.css">
      <link href='https://fonts.googleapis.com/css?family=Faster One' rel='stylesheet'>
      <!--First link: Links to CSS file. Second link: Links to a font type unique to Google Fonts.-->
      <script src='main.js'></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <canvas class="img" id="myCanvas" width="70" height="50" style="border:2px solid #d3d3d3;">
         Your browser does not support the HTML5 canvas tag.
      </canvas>
      <!--This canvas tag displays the logo at the top left, and it allows us to design the size and the borders to the logo.-->
      <script>
         var c = document.getElementById("myCanvas");
         var ctx = c.getContext("2d");
         ctx.font = "30px Helvetica";
         ctx.fillText("R E ",9,35);
         var c = document.getElementById("myCanvas");
         var ctx = c.getContext("2d");
      </script>
      <!--This script allows us to design the inner portion of the logo at the top left.-->
      <nav>
         <div style="width: 50%; margin-left: auto; margin-right: auto;">
         <!--Width, margin-left, and margin-right are necessary as it centers the Navigation menu.-->
            <ul>
               <p><a href='index.html'>Home</a> / 
                  <a href='About.html'>About</a> / 
                  <a href='Work.html'>Projects</a> /
                  <a id="contact" href="javascript:void(0)">Contact</a>
                  <div class=social1>
                  <p id="slide">
                  <a class="socials" href="javascript:void(0)">
                  <img src="facebook.png" alt="Facebook" style="width:60px;height:60px;border:0">
                  </a>
                  <a class="socials" href="javascript:void(0)">
                  <img src="instagram.png" alt="Instagram" style="width:60px;height:60px;border:0">
                  </a>
                  <a class="socials" href="javascript:void(0)">
                  <img src="github.png" alt="Github" style="width:60px;height:60px;border:0">
                  </a>
                  <a class="socials" href="javascript:void(0)">
                  <img src="LinkedIn.png" alt="LinkedIn" style="width:60px;height:60px;border:0">
                  </a>
                  </p>
               </div>
            </ul>
         </div>
      </nav>


   <hr>

</body>
</html>




JQUERY:

$(document).ready(function(){
            $(".socials").hide();
            $("#contact").click(function() {
               $(".socials").show();
               $("#slide").slideToggle("slow");
         });      
      });

对不起，格式不好，我是新来的，我只是在寻求帮助。预先感谢。

jQuery slidetoggle第一次无法正常工作

0 个答案: