Скрыть и показать переключатель не работают

У меня есть код, чтобы скрытый 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">.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>

1 ответ

  1. Если я понял вашу просьбу, что-то вроде этого должно сработать для вас.

    Пример JSBin

    Я использовал этот пост в качестве отправной точки.

    Сначала удаляем все действия, связанные с: hover .

    Затем я добавил ответ css (преобразование), который я хотел в классе под названием flip, который я добавляю в контейнер с помощью функции 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>