Question

我当前正在使用Flickity滑块，并想在单击“ +”图标时隐藏箭头，并且在禁用覆盖时显示箭头。

箭头的类别为.flickity-prev-next-button。单击按钮后，我想添加一个display:none; css属性。

实现此目标的最佳方法是什么？下面列出了打开和关闭覆盖图的功能。我尝试将$(".flickity-prev-next-button").css("display", "none");添加到if语句中，但不幸的是没有运气。

       function openNav() {
      // if the element has the class tcon-transform (added/removed before calling this)
      if (event.target.classList.contains("tcon-transform")) {
        // the original icon was the plus: open the navigation
        document.getElementById("myNav").style.left = "50%";
$(".flickity-prev-next-button").css("display", "none");
      } else {
        // the original icon was the minus: close the navigation
        closeNav();
      }
        function closeNav() {
      document.getElementById("myNav").style.left = "100%";
    }
    }

这是一个代码段供您参考。

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";

  } else {

    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

#transformicon {
  float: right;
  position: relative;
  z-index: 2;
}

<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<!-- Import zero-transformicon build bundle -->
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
<div id="transformicon">
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>
</div>

<div class="main-carousel js-flickity" data-flickity-options='{ "cellAlign": "left","contain": true,"wrapAround":true,"draggable":true,"arrowShape":"M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z"
}'>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
</div>

<div id="myNav" class="overlay">

</div>

Answer 1

您尝试的代码：

$(".flickity-prev-next-button").css("display", "none");

为我工作，但是您可能想使用

$('.flickity-prev-next-button').toggle();

，以便在关闭叠加层时重新显示导航按钮。

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  $('.flickity-prev-next-button').toggle();
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";

  } else {

    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}

.main-carousel {
  margin-top: 50px;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

#transformicon {
  float: right;
  position: relative;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<!-- Import zero-transformicon build bundle -->
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
<div id="transformicon">
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>
</div>

<div class="main-carousel js-flickity" data-flickity-options='{ "cellAlign": "left","contain": true,"wrapAround":true,"draggable":true,"arrowShape":"M62.5 0l3.6 2.1L38.7 50l27.4 47.9-3.6 2.1-28.6-50L62.5 0z"
}'>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
  <div class="carousel-cell"><img src="https://i.ibb.co/zVBkvKZ/fever-t-shirt-front.jpg" alt="fever-t-shirt-front" border="0"></div>
</div>

<div id="myNav" class="overlay">

</div>

Answer 2

   You can use  $(".flickity-button").css('display','none');

  function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
  // the original icon was the plus: open the navigation
  document.getElementById("myNav").style.left = "50%";
  $(".flickity-button").css('display','none');
  } else {

   // the original icon was the minus: close the navigation
   closeNav();
 }

  function closeNav() {
     document.getElementById("myNav").style.left = "100%";
     $(".flickity-button").css('display','block');
  }
}

选择覆盖时隐藏图像轮播上/下一个箭头

2 个答案: