Question

我有代码在点击之前显示另一个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>

Answer 1

如果我理解你的要求，这样的事情对你有用。

JSBin Example

我用这个post作为起点。

首先，我们删除与：悬停相关的所有操作。

然后我在一个名为 flip 的类中添加了我想要的css响应（转换），我使用js函数添加到容器中，这是通过单击按钮触发的。

因此，当容器获得类翻转时，我们将以下样式应用于其所有内容：

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

＆＃13;

function flipIt() {
  $(".flip-container").toggleClass("flip");
}

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

隐藏和显示切换不起作用

1 个答案:

JSBin Example