隐藏和显示切换不工作

Hide and Show toggle are not working

本文关键字：工作 显示 隐藏      更新时间：2023-09-26

我有代码有一个隐藏的div成为显示时，另一个div之前，它被单击。但是，代码似乎不工作，当我在firefox中检查元素时，我甚至看不到附加的事件侦听器。

代码

                                 <div class="col-sm-4 uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up toggle2" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: false}" id="DivMenuMain">
                                <div class="wiwet-feature_item1 menu-individual" id="divMenuInside1a" runat="server">
                                    <div class="wpm_feature_icon itemName">NAME</div>
                                    <div class="background-menu-pic"></div>
                                    <div class="menuSquarePrice">$9.99</div>
                                    <div class="homePage3s">DESCRIPTION TEXT</div>
                                    <div class="desertToo">Add A Dessert</div>
                                </div>
                                 <div class="wiwet-feature_item1 menu-individual hidden2" id="divMenuInside1b" runat="server">
                                    <div class="wpm_feature_icon greedies">Ingredients</div>
                                    <div class="menuSquareNutrition">Nutritional</div>
                                    <div class="prepTime">Best if prepared by x days</div>
                                </div>
                            </div>                             <script type="text/javascript">
                             function() {
                                 $('.current').not(this).toggleClass('current').next('.hidden2').slideFadeToggle();
                                 $(this).toggleClass('current').next().slideFadeToggle(500, function() {
                                     var this_element = $(this);
                                     setTimeout(function() {
                                         var scroll_to = this_element.prev('.toggle2').offset().top;
                                         $('html, body').animate({
                                             scrollTop: scroll_to
                                         }, 500);
                                     }, 500);
                                 });
                             }
                           </script>

如果我理解你的要求，这样的东西应该为你工作。

JSBin例子

我以这篇文章为起点。

首先我们移除所有与:hover相关的动作。

然后我添加了css响应(转换)，我想在一个类称为翻转，我添加到容器使用一个js函数，这是通过点击一个按钮触发。

所以当容器获得类翻转时我们将下面的样式应用到它的所有内容上:

.flip-container.flip > .flipper {
  transform: rotateY(180deg);
}


function flipIt() {
  $(".flip-container").toggleClass("flip");
}
.flip-container {
  perspective: 1000px;
}
.flip-container,
.front,
.back {
  width: 200px;
  height: 253px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}
.flip-container.flip > .flipper {
  transform: rotateY(180deg);
}
img {
  width: 200px;
}
button{
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="flipIt()">Toggle</button>
  
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <img src="http://i.imgur.com/q1hXv6d.png" alt="">
      </div>
      <div class="back">
        <img src="http://i.imgur.com/q1hXv6d.png" alt="">
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

相关文章：