我的社交媒体面板无法正常工作

Question

我想问一下关于 javascript 的问题。我想创建一个社交媒体共享浮动面板。我已经编写了如下代码，但面板无法正常工作。

当面板关闭时，它会显示共享图标。但在那里，它显示关闭图标。以前，此代码适用于已首先打开的面板。但我希望面板不要打开，而是关闭。所以我删除了<div class="panel-socmed"> 中的open 类。但是发生了什么事，它变得一团糟。我想在顶部滚动时，面板打不开。

谁能帮帮我？

function toggleMenu() {
   if ($(".panel-socmed").hasClass("open")) {
       openMenu();
   } else {
       closeMenu();
  }
}

function openMenu() {
  $(".panel-socmed").removeClass("open");
  $("#closeShare").find(".fa-times").hide();
  $("#closeShare").find(".fa-share-alt").show();
}

function closeMenu() {
  $(".panel-socmed").addClass("open");
  $("#closeShare").find(".fa-times").show();
  $("#closeShare").find(".fa-share-alt").hide();
}

$(document).ready(function() {
   $('#closeShare').click(function() {
      toggleMenu();
    });
  
  $(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
          openMenu();
       } else{
          closeMenu();
       }
    
     if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
       $("#toTop").css("display","block");
     } else {
       $("#toTop").css("display","none");
     }
   });
});

body{
  background-color:#c4c4c4;  
}

#floatingPanel{
    position: fixed;
    z-index: 9;
    bottom: 0;
    right: 3%;
    text-align: center;
}

.instagram{
    background-color: #BC2A95;
}

.facebook{
    background-color:#3F7BDB;
}

.twitter{
    background-color: #5EB7F8;
}

.youtube{
    background-color: #D84B4B;
}

.linkedin{
    background-color: #3A66B9;
}

.instagram, .facebook, .twitter, .youtube, .linkedin {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width:35px;
    height:35px;
    border-radius: 50%;
    margin: 5px 0;
    font-size: 13px;
    text-decoration: none !important;
    outline: none;
}

#socialMedia,#closeShare,#chat,#toTop{
    margin: 15px 0;
}

#closeShare{
    cursor: pointer;
    display: flex;
    align-items:center;
    justify-content:center;
    background:red;
    width:40px;
    height:40px;
    border-radius:50%;       
}
    
#closeShare .fa-share-alt{
    display: none;
}

#toTop{
    background-color:blue;
    color:#fff;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.panel-socmed {
    display:none;
}

.panel-socmed.open{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 35px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>


<div id="floatingPanel">
   <div class="panel-socmed">
      <a href="#" class="instagram">
         <i class="fab fa-instagram"></i>
      </a>
      <a href="#" class="facebook">
         <i class="fab fa-facebook-f"></i>
      </a>
      <a href="#" class="twitter">
         <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="youtube">
         <i class="fab fa-youtube"></i>
      </a>
      <a href="#" class="linkedin">
         <i class="fab fa-linkedin-in"></i>
      </a>
   </div>
   <div id="closeShare">
<!--   <img src="assets/img/component/icon/share.svg" alt="" class="img-fluid share-panel">
       <img src="assets/img/component/icon/close.svg" alt="" class="img-fluid close-panel"> -->
       <i class="fas fa-times"></i>
       <i class="fas fa-share-alt"></i>
   </div>
  <div id="toTop">
    <i class="fas fa-chevron-up"></i>
  </div>
</div>
<div class="content">
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam iste cupiditate, asperiores ea quis enim ipsum, explicabo laboriosam porro harum recusandae! Eveniet atque molestias qui unde facere alias sed corporis veniam maxime deleniti sit vero aperiam quisquam, vitae, enim ad ratione, pariatur esse ex labore error? Iusto deleniti similique laboriosam harum veritatis repudiandae officia reprehenderit reiciendis illum molestiae maiores cumque vitae molestias at cum, facere nemo. Incidunt ratione repellendus deserunt facilis, tempore consequatur doloremque quo minus inventore error voluptates similique numquam? Autem, quam dolore minima consequuntur dolorem vitae animi nostrum. Voluptates nesciunt dolorem perspiciatis dolore pariatur totam modi at officiis amet quod optio accusantium, eius vel ad? Nulla laboriosam, minus numquam molestiae blanditiis dicta sed sint incidunt ducimus et veritatis excepturi nostrum ipsam optio rerum, reiciendis eaque commodi, fuga autem harum? Neque minus nemo pariatur. Recusandae voluptatum quae, vitae, voluptate impedit dicta minima natus ut exercitationem veniam laboriosam perferendis voluptas, aspernatur quidem culpa voluptatem quis? Eligendi, quia assumenda. Incidunt repudiandae deserunt placeat aliquam, cumque fugiat delectus voluptatem nobis amet quas ab aperiam dolore tempora ducimus, neque aliquid perferendis adipisci facilis? Nam dolorum ex iusto ab praesentium molestias et, maxime doloribus necessitatibus consequatur aut, eveniet, in facilis nihil deserunt adipisci. Fugiat dolorem recusandae reprehenderit sint suscipit vel cupiditate veniam corrupti accusamus, asperiores tempora laboriosam quam. Inventore cumque nam consequuntur aliquam sapiente soluta possimus aut laudantium, fuga cum neque in mollitia iure dolor at explicabo ea et non culpa! Temporibus ab harum nam quasi quis repellat odio maxime reiciendis porro ad quia sapiente modi eius debitis, rerum odit numquam. Laboriosam magnam neque quibusdam, earum dolores aperiam corporis eum deserunt necessitatibus error veniam labore quasi saepe quaerat ea unde totam placeat beatae blanditiis repellat autem cupiditate quod quos at. Vitae voluptate ratione id ab cumque illo cum totam expedita, perspiciatis nam laudantium omnis dolorem, aliquid fugiat assumenda, possimus doloribus? Ipsam vitae eligendi velit ut, cupiditate nisi recusandae vel dolore, nobis odit veniam eveniet earum perspiciatis dolorum esse corrupti beatae quos provident officia qui, cum modi non. Quaerat quos dolorum totam officiis nostrum omnis blanditiis harum cum eligendi explicabo quisquam similique enim consequatur molestias cupiditate impedit, aperiam nesciunt dolore soluta odio voluptates fugiat vitae tempore. Odio ipsum quasi qui at corrupti reprehenderit nostrum alias, in, neque rem corporis dolore consequuntur ut. Doloribus nisi voluptas delectus quis hic, minima at consequuntur qui nostrum suscipit alias. Alias explicabo voluptates fuga repellat esse cum. Ea blanditiis perspiciatis excepturi molestias fugiat tempora, maxime, dolor quas magni deserunt, aliquam enim quasi omnis repudiandae fuga voluptates ad sit alias libero veniam. Rem, similique labore, atque sequi doloribus magnam at enim veniam eius nostrum eligendi! Fugit officia asperiores et, dolorum aspernatur possimus, nobis sequi reiciendis unde fuga nemo quam, minima eos neque aperiam aliquid. Tempora tempore neque, et alias ipsum ratione adipisci omnis nobis? Officiis blanditiis libero eaque quam assumenda eos ipsum fuga aut obcaecati similique dolor sapiente nisi, nam odio? Deleniti velit iste nam provident maiores laboriosam accusantium molestiae, unde neque eos atque tempore sequi et veniam? Inventore reiciendis error eum architecto est aut, tenetur dignissimos libero repudiandae modi accusamus ducimus culpa odio laborum itaque quod in atque eligendi. Animi, debitis in similique culpa obcaecati sed illo doloribus quasi numquam aut porro hic pariatur alias iusto nesciunt tempore a voluptate id, non ad, cum et. Qui praesentium cupiditate doloremque possimus sed porro deserunt aliquam quas. Ad, eius assumenda dolorum labore in, nemo odit odio suscipit dolorem nulla, dicta atque. Quia, repellat quod. Cum optio aspernatur magnam ducimus dolorem earum suscipit eos, rem sapiente, ipsa ut inventore quidem quae quis modi expedita perferendis tempore ullam blanditiis aperiam saepe error! Quibusdam, voluptate accusantium harum itaque fuga doloribus maiores iusto sunt beatae sapiente distinctio commodi in quam recusandae dolores nisi placeat? Veritatis optio dolorem distinctio. Libero eligendi vero molestiae vel ducimus perferendis quo sunt aliquid fugiat obcaecati quas incidunt enim expedita doloribus accusantium a necessitatibus eum voluptatem tenetur nemo delectus, laboriosam similique perspiciatis earum! Natus voluptatem quae maiores qui aliquam voluptatibus dolore, architecto, saepe libero eveniet fuga atque magnam harum ipsam numquam quibusdam. Aut odit non cupiditate modi, nihil quis eos quae rem, corrupti fuga fugit suscipit atque vel tempore, voluptate sint? Asperiores consequuntur, soluta cum laudantium vero ex. Voluptatum ipsum accusamus dolorem illo molestiae perspiciatis deleniti itaque ipsam optio, eius voluptates doloremque dolor, placeat labore molestias est at voluptatibus? Voluptatum accusantium consequatur nulla labore asperiores! Nulla aperiam, laudantium architecto amet, eligendi quos porro accusamus sit voluptatibus libero quidem? Doloremque nemo modi veniam nisi. Magnam laboriosam, voluptate, recusandae libero molestias quia beatae expedita fugit culpa ab velit! Aperiam quam, accusantium doloremque minus, incidunt odit dolorum voluptate laboriosam laudantium, possimus obcaecati delectus quae voluptatem! Suscipit provident recusandae non, reiciendis quam pariatur obcaecati. Ab quidem perferendis laudantium vel dolore repellendus corporis commodi ex veniam, molestias delectus ipsum non sed dolores dolorum quasi? Dignissimos aut iste ratione nisi itaque unde debitis incidunt fugiat voluptatum autem ipsa sapiente explicabo eius officiis, aspernatur totam dolorum dolores! Fuga alias quae facilis quam quis consequuntur omnis eligendi doloremque molestiae. Dignissimos, voluptate dolore! Tempora consequatur laudantium dignissimos modi. Voluptas adipisci similique non aut, repellat nisi quaerat illum dolores accusamus sequi labore dolorum dolorem fugit velit magni nobis reiciendis dignissimos soluta excepturi perspiciatis molestiae eius ea voluptates! Dolore modi aliquid dignissimos sunt, quaerat a quidem, pariatur quod corporis esse excepturi assumenda provident magnam vero voluptates accusamus, eligendi nam quae doloribus rem ad ipsa. Laboriosam maxime animi aliquam maiores tempore voluptatem, nulla consequuntur, ipsa quidem officia veritatis laudantium ad alias minima reiciendis totam et cum dolores facere minus magnam. Nostrum excepturi magnam dolorem quibusdam inventore qui non magni est doloribus molestias possimus, delectus vitae expedita perspiciatis voluptas. Obcaecati, enim voluptatum laboriosam vitae similique excepturi ab fugiat, quidem, dolores mollitia exercitationem nesciunt? Pariatur expedita architecto itaque possimus quisquam officiis modi earum qui eveniet aliquid illum vel, minima voluptate odit maiores at tempora saepe nisi numquam perferendis facilis fuga dicta sit omnis. Ipsum ipsam quibusdam, necessitatibus tempore quae sunt architecto aperiam eos dignissimos sed accusantium, assumenda corporis reprehenderit numquam quaerat excepturi dolore sequi, officiis nisi.
  </p>
</div>

Answer 1

问题是你的#closeShare .fa-share-alt 有display: none; 所以关闭图标在开始时显示。只需更改：

#closeShare .fa-share-alt {
  display: none;
}

收件人：

#closeShare .fa-times {
  display: none;
}

然后它将按预期工作。

function toggleMenu() {
   if ($(".panel-socmed").hasClass("open")) {
       openMenu();
   } else {
       closeMenu();
  }
}

function openMenu() {
  $(".panel-socmed").removeClass("open");
  $("#closeShare").find(".fa-times").hide();
  $("#closeShare").find(".fa-share-alt").show();
}

function closeMenu() {
  $(".panel-socmed").addClass("open");
  $("#closeShare").find(".fa-times").show();
  $("#closeShare").find(".fa-share-alt").hide();
}

$(document).ready(function() {
   $('#closeShare').click(function() {
      toggleMenu();
    });
  
  $(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
          openMenu();
       } else{
          closeMenu();
       }
    
     if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
       $("#toTop").css("display","block");
     } else {
       $("#toTop").css("display","none");
     }
   });
   
   $(window).trigger('scroll');
});

body{
  background-color:#c4c4c4;  
}

#floatingPanel{
    position: fixed;
    z-index: 9;
    bottom: 0;
    right: 3%;
    text-align: center;
}

.instagram{
    background-color: #BC2A95;
}

.facebook{
    background-color:#3F7BDB;
}

.twitter{
    background-color: #5EB7F8;
}

.youtube{
    background-color: #D84B4B;
}

.linkedin{
    background-color: #3A66B9;
}

.instagram, .facebook, .twitter, .youtube, .linkedin {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width:35px;
    height:35px;
    border-radius: 50%;
    margin: 5px 0;
    font-size: 13px;
    text-decoration: none !important;
    outline: none;
}

#socialMedia,#closeShare,#chat,#toTop{
    margin: 15px 0;
}

#closeShare{
    cursor: pointer;
    display: flex;
    align-items:center;
    justify-content:center;
    background:red;
    width:40px;
    height:40px;
    border-radius:50%;       
}
  
#closeShare .fa-times {
    display: none;
}

#toTop{
    background-color:blue;
    color:#fff;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.panel-socmed {
    display:none;
}

.panel-socmed.open{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 35px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>


<div id="floatingPanel">
   <div class="panel-socmed">
      <a href="#" class="instagram">
         <i class="fab fa-instagram"></i>
      </a>
      <a href="#" class="facebook">
         <i class="fab fa-facebook-f"></i>
      </a>
      <a href="#" class="twitter">
         <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="youtube">
         <i class="fab fa-youtube"></i>
      </a>
      <a href="#" class="linkedin">
         <i class="fab fa-linkedin-in"></i>
      </a>
   </div>
   <div id="closeShare">
<!--   <img src="assets/img/component/icon/share.svg" alt="" class="img-fluid share-panel">
       <img src="assets/img/component/icon/close.svg" alt="" class="img-fluid close-panel"> -->
       <i class="fas fa-times"></i>
       <i class="fas fa-share-alt"></i>
   </div>
  <div id="toTop">
    <i class="fas fa-chevron-up"></i>
  </div>
</div>
<div class="content">
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam iste cupiditate, asperiores ea quis enim ipsum, explicabo laboriosam porro harum recusandae! Eveniet atque molestias qui unde facere alias sed corporis veniam maxime deleniti sit vero aperiam quisquam, vitae, enim ad ratione, pariatur esse ex labore error? Iusto deleniti similique laboriosam harum veritatis repudiandae officia reprehenderit reiciendis illum molestiae maiores cumque vitae molestias at cum, facere nemo. Incidunt ratione repellendus deserunt facilis, tempore consequatur doloremque quo minus inventore error voluptates similique numquam? Autem, quam dolore minima consequuntur dolorem vitae animi nostrum. Voluptates nesciunt dolorem perspiciatis dolore pariatur totam modi at officiis amet quod optio accusantium, eius vel ad? Nulla laboriosam, minus numquam molestiae blanditiis dicta sed sint incidunt ducimus et veritatis excepturi nostrum ipsam optio rerum, reiciendis eaque commodi, fuga autem harum? Neque minus nemo pariatur. Recusandae voluptatum quae, vitae, voluptate impedit dicta minima natus ut exercitationem veniam laboriosam perferendis voluptas, aspernatur quidem culpa voluptatem quis? Eligendi, quia assumenda. Incidunt repudiandae deserunt placeat aliquam, cumque fugiat delectus voluptatem nobis amet quas ab aperiam dolore tempora ducimus, neque aliquid perferendis adipisci facilis? Nam dolorum ex iusto ab praesentium molestias et, maxime doloribus necessitatibus consequatur aut, eveniet, in facilis nihil deserunt adipisci. Fugiat dolorem recusandae reprehenderit sint suscipit vel cupiditate veniam corrupti accusamus, asperiores tempora laboriosam quam. Inventore cumque nam consequuntur aliquam sapiente soluta possimus aut laudantium, fuga cum neque in mollitia iure dolor at explicabo ea et non culpa! Temporibus ab harum nam quasi quis repellat odio maxime reiciendis porro ad quia sapiente modi eius debitis, rerum odit numquam. Laboriosam magnam neque quibusdam, earum dolores aperiam corporis eum deserunt necessitatibus error veniam labore quasi saepe quaerat ea unde totam placeat beatae blanditiis repellat autem cupiditate quod quos at. Vitae voluptate ratione id ab cumque illo cum totam expedita, perspiciatis nam laudantium omnis dolorem, aliquid fugiat assumenda, possimus doloribus? Ipsam vitae eligendi velit ut, cupiditate nisi recusandae vel dolore, nobis odit veniam eveniet earum perspiciatis dolorum esse corrupti beatae quos provident officia qui, cum modi non. Quaerat quos dolorum totam officiis nostrum omnis blanditiis harum cum eligendi explicabo quisquam similique enim consequatur molestias cupiditate impedit, aperiam nesciunt dolore soluta odio voluptates fugiat vitae tempore. Odio ipsum quasi qui at corrupti reprehenderit nostrum alias, in, neque rem corporis dolore consequuntur ut. Doloribus nisi voluptas delectus quis hic, minima at consequuntur qui nostrum suscipit alias. Alias explicabo voluptates fuga repellat esse cum. Ea blanditiis perspiciatis excepturi molestias fugiat tempora, maxime, dolor quas magni deserunt, aliquam enim quasi omnis repudiandae fuga voluptates ad sit alias libero veniam. Rem, similique labore, atque sequi doloribus magnam at enim veniam eius nostrum eligendi! Fugit officia asperiores et, dolorum aspernatur possimus, nobis sequi reiciendis unde fuga nemo quam, minima eos neque aperiam aliquid. Tempora tempore neque, et alias ipsum ratione adipisci omnis nobis? Officiis blanditiis libero eaque quam assumenda eos ipsum fuga aut obcaecati similique dolor sapiente nisi, nam odio? Deleniti velit iste nam provident maiores laboriosam accusantium molestiae, unde neque eos atque tempore sequi et veniam? Inventore reiciendis error eum architecto est aut, tenetur dignissimos libero repudiandae modi accusamus ducimus culpa odio laborum itaque quod in atque eligendi. Animi, debitis in similique culpa obcaecati sed illo doloribus quasi numquam aut porro hic pariatur alias iusto nesciunt tempore a voluptate id, non ad, cum et. Qui praesentium cupiditate doloremque possimus sed porro deserunt aliquam quas. Ad, eius assumenda dolorum labore in, nemo odit odio suscipit dolorem nulla, dicta atque. Quia, repellat quod. Cum optio aspernatur magnam ducimus dolorem earum suscipit eos, rem sapiente, ipsa ut inventore quidem quae quis modi expedita perferendis tempore ullam blanditiis aperiam saepe error! Quibusdam, voluptate accusantium harum itaque fuga doloribus maiores iusto sunt beatae sapiente distinctio commodi in quam recusandae dolores nisi placeat? Veritatis optio dolorem distinctio. Libero eligendi vero molestiae vel ducimus perferendis quo sunt aliquid fugiat obcaecati quas incidunt enim expedita doloribus accusantium a necessitatibus eum voluptatem tenetur nemo delectus, laboriosam similique perspiciatis earum! Natus voluptatem quae maiores qui aliquam voluptatibus dolore, architecto, saepe libero eveniet fuga atque magnam harum ipsam numquam quibusdam. Aut odit non cupiditate modi, nihil quis eos quae rem, corrupti fuga fugit suscipit atque vel tempore, voluptate sint? Asperiores consequuntur, soluta cum laudantium vero ex. Voluptatum ipsum accusamus dolorem illo molestiae perspiciatis deleniti itaque ipsam optio, eius voluptates doloremque dolor, placeat labore molestias est at voluptatibus? Voluptatum accusantium consequatur nulla labore asperiores! Nulla aperiam, laudantium architecto amet, eligendi quos porro accusamus sit voluptatibus libero quidem? Doloremque nemo modi veniam nisi. Magnam laboriosam, voluptate, recusandae libero molestias quia beatae expedita fugit culpa ab velit! Aperiam quam, accusantium doloremque minus, incidunt odit dolorum voluptate laboriosam laudantium, possimus obcaecati delectus quae voluptatem! Suscipit provident recusandae non, reiciendis quam pariatur obcaecati. Ab quidem perferendis laudantium vel dolore repellendus corporis commodi ex veniam, molestias delectus ipsum non sed dolores dolorum quasi? Dignissimos aut iste ratione nisi itaque unde debitis incidunt fugiat voluptatum autem ipsa sapiente explicabo eius officiis, aspernatur totam dolorum dolores! Fuga alias quae facilis quam quis consequuntur omnis eligendi doloremque molestiae. Dignissimos, voluptate dolore! Tempora consequatur laudantium dignissimos modi. Voluptas adipisci similique non aut, repellat nisi quaerat illum dolores accusamus sequi labore dolorum dolorem fugit velit magni nobis reiciendis dignissimos soluta excepturi perspiciatis molestiae eius ea voluptates! Dolore modi aliquid dignissimos sunt, quaerat a quidem, pariatur quod corporis esse excepturi assumenda provident magnam vero voluptates accusamus, eligendi nam quae doloribus rem ad ipsa. Laboriosam maxime animi aliquam maiores tempore voluptatem, nulla consequuntur, ipsa quidem officia veritatis laudantium ad alias minima reiciendis totam et cum dolores facere minus magnam. Nostrum excepturi magnam dolorem quibusdam inventore qui non magni est doloribus molestias possimus, delectus vitae expedita perspiciatis voluptas. Obcaecati, enim voluptatum laboriosam vitae similique excepturi ab fugiat, quidem, dolores mollitia exercitationem nesciunt? Pariatur expedita architecto itaque possimus quisquam officiis modi earum qui eveniet aliquid illum vel, minima voluptate odit maiores at tempora saepe nisi numquam perferendis facilis fuga dicta sit omnis. Ipsum ipsam quibusdam, necessitatibus tempore quae sunt architecto aperiam eos dignissimos sed accusantium, assumenda corporis reprehenderit numquam quaerat excepturi dolore sequi, officiis nisi.
  </p>
</div>