Повтороная работа скрипта

244
18 ноября 2017, 13:09

У меня есть 5 блоков с ссылками. При нажатии на ссылку, должна появляться менюха в модальном окне. В этой модалке есть еще одна ссылка, при нажатии на которую меню раскрывается как книжечка. Сделать это у меня получилось, но меню открывается только один раз и только для первой ссылки из тех 5 блоков. Как сделать так, чтобы скрипт отрабатывал на всех ссылках? Это скрипт открывания меню

var Menu = (function() { 
    var $container = $( '#rm-container' ),                       
        $cover = $container.find( 'div.rm-cover' ), 
        $middle = $container.find( 'div.rm-middle' ), 
        $right = $container.find( 'div.rm-right' ), 
        $open = $cover.find('a.rm-button-open'), 
        $close = $right.find('span.rm-close'), 
        $details = $container.find( 'a.rm-viewdetails' ), 
         
        init = function() { 
            initEvents(); 
        }, 
        initEvents = function() { 
            $open.on( 'click', function( event ) { 
                openMenu(); 
                return false; 
            } ); 
            $close.on( 'click', function( event ) { 
                closeMenu(); 
                return false; 
            } ); 
            $details.on( 'click', function( event ) { 
                $container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove(); 
                viewDetails( $( this ) ); 
                return false; 
 
            } ); 
        }, 
        openMenu = function() { 
            $container.addClass( 'rm-open' ); 
        }, 
        closeMenu = function() { 
            $container.removeClass( 'rm-open rm-nodelay rm-in' ); 
        }, 
        viewDetails = function( recipe ) { 
            var title = recipe.text(), 
                img = recipe.data( 'thumb' ), 
                description = recipe.parent().next().text(), 
                url = recipe.attr( 'href' ); 
            var h = $modal.outerHeight( true ); 
            $modal.css( 'margin-top', -h / 2 ); 
 
            setTimeout( function() { 
                $container.addClass( 'rm-in rm-nodelay' ); 
                $modal.find( 'span.rm-close-modal' ).on( 'click', function() { 
                    $container.removeClass( 'rm-in' ); 
                } ); 
            }, 0 ); 
        }; 
    return { init : init }; 
})();
.rm-container { 
  width: 50%; 
  height: 700px; 
  max-width: 370px; 
  margin: 0 auto 40px auto; 
  position: relative; 
  -webkit-perspective: 1600px; 
  -moz-perspective: 1600px; 
  -o-perspective: 1600px; 
  -ms-perspective: 1600px; 
  perspective: 1600px; 
 color: #2a323f; 
 z-index: 1200; 
} 
 
.rm-wrapper, 
.rm-wrapper > div { 
  width: 100%; 
  height: 100%; 
  left: 0; 
  top: 0; 
  position: absolute; 
  text-align: center; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -o-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
} 
 
.rm-wrapper .rm-cover { 
  z-index: 100; 
  -webkit-transform-origin: 0% 50%; 
  -webkit-transition-delay: 0.2s; 
  -moz-transform-origin: 0% 50%; 
  -moz-transition-delay: 0.2s; 
  -o-transform-origin: 0% 50%; 
  -o-transition-delay: 0.2s; 
  -ms-transform-origin: 0% 50%; 
  -ms-transition-delay: 0.2s; 
  transform-origin: 0% 50%; 
  transition-delay: 0.2s; 
} 
 
.rm-wrapper .rm-middle { 
  z-index: 50; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.7); 
} 
 
.rm-wrapper .rm-right { 
  z-index: 60; 
  -webkit-transform-origin: 100% 50%; 
  -webkit-transition-delay: 0s; 
  -moz-transform-origin: 100% 50%; 
  -moz-transition-delay: 0s; 
  -o-transform-origin: 100% 50%; 
  -o-transition-delay: 0s; 
  -ms-transform-origin: 100% 50%; 
  -ms-transition-delay: 0s; 
  transform-origin: 100% 50%; 
  transition-delay: 0s; 
} 
 
.rm-wrapper > div > div { 
  background: #fff; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  padding: 30px; 
  /*box-shadow:  
    inset 0 0 0 16px #fff,  
    inset 0 0 0 17px #e6b741,  
    inset 0 0 0 18px #fff,  
    inset 0 0 0 19px #e6b741,  
    inset 0 0 0 20px #fff,  
    inset 0 0 0 21px #e6b741;*/ 
 
} 
 
.rm-container .rm-front, 
.rm-container .rm-back { 
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden; 
  -o-backface-visibility: hidden; 
  -ms-backface-visibility: hidden; 
  backface-visibility: hidden; 
} 
 
.rm-container .rm-back { 
  -webkit-transform: rotateY(-180deg); 
  -moz-transform: rotateY(-180deg); 
  -o-transform: rotateY(-180deg); 
  -ms-transform: rotateY(-180deg); 
  transform: rotateY(-180deg); 
} 
 
.rm-overlay { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  pointer-events: none; 
  background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%); 
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.05))); 
  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); 
  background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); 
  background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); 
  background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%); 
} 
 
.rm-middle .rm-overlay { 
  background: -moz-linear-gradient(left, rgba(0,0,0,0) 64%, rgba(0,0,0,0.05) 100%); 
  background: -webkit-gradient(linear, left top, right top, color-stop(64%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.05))); 
  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%); 
  background: -o-linear-gradient(left, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%); 
  background: -ms-linear-gradient(left, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%); 
  background: linear-gradient(to right, rgba(0,0,0,0) 64%,rgba(0,0,0,0.05) 100%); 
} 
 
.rm-content { 
  padding: 20px; 
} 
 
.rm-logo,  
.rm-content h2, 
.rm-content h4, 
a.rm-button-open{ 
  font-weight: 700; 
  text-transform: uppercase; 
} 
 
.rm-logo { 
  width: 100px; 
  height: 100px; 
  background: #323b4c url(../images/restaurant.jpg) no-repeat center center; 
  border-radius: 50%; 
  margin: 20px auto; 
  box-shadow:  
    0 0 0 3px #fff,  
    0 0 0 4px #e6b741,  
    0 0 0 5px #fff,  
    0 0 0 6px #e6b741,  
    0 0 0 7px #fff,  
    0 0 0 8px #e6b741; 
} 
 
.rm-content h2 { 
  letter-spacing: 2px; 
  font-size: 26px; 
  text-shadow: 1px 1px 0 #fff, 3px 3px 0 #e6b741; 
} 
 
.rm-content h3 { 
  font-size: 13px; 
  margin: 40px 0; 
  padding: 20px 40px; 
  color: #323b4c; 
  font-weight: 500; 
  border-top: 4px double #323b4c; 
  text-transform: uppercase; 
  line-height: 20px; 
  text-shadow: 1px 1px 0 rgba(255,255,255,0.8); 
} 
 
.rm-content h4 { 
  margin: 0 0 20px 0; 
  font-size: 16px; 
  padding-bottom: 10px; 
  color: #323b4c; 
  border-bottom: 4px double #323b4c; 
   
} 
 
.rm-content h4:not(:first-child) { 
  margin-top: 35px; 
} 
 
a.rm-button-open { 
  color: #323b4c;  
  font-size: 16px; 
  line-height: 45px; 
  margin: 10px auto; 
  display: block; 
  text-shadow: 0 1px 0 rgba(255,255,255,0.8); 
} 
 
a.rm-button-open:hover { 
  color: #e6b741; 
} 
 
.rm-info p { 
  line-height: 20px; 
} 
 
.rm-content dl{ 
  margin: 0; 
} 
 
.rm-content dl dt, 
.rm-content dl dd{ 
  display: block; 
  margin: 0; 
} 
 
.rm-content dl dt { 
  font-weight: 500; 
  text-transform: uppercase; 
} 
 
.rm-content dl dd { 
  font-size: 13px; 
  padding: 4px 5px 15px; 
  line-height: 15px; 
  color: #333; 
} 
 
.rm-order p{ 
  padding: 10px; 
  background: rgba(213, 193, 154, 0.2); 
  margin: 20px 0 0; 
} 
 
a.rm-viewdetails:before{ 
  font-family: 'entypo-selected'; 
  content: '\56'; 
  font-style: normal; 
  font-weight: normal; 
  speak: none; 
  display: inline-block; 
  text-decoration: inherit; 
  width: 15px; 
  margin-right: 4px; 
  text-align: center; 
  opacity: 0.7; 
  line-height: 16px; 
  text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 
} 
 
 
 
 
.rm-thumb { 
  width: 100px; 
  height: 100px; 
  background-repeat: no-repeat; 
  background-position: center center; 
  float: left; 
  margin: 0 20px 0 0; 
  box-shadow:  
    inset 1px 1px 3px rgba(0,0,0,0.2),  
    1px 1px 1px rgba(255,255,255,0.9); 
} 
 
.rm-button-open:after { 
  content: '\2192'; 
  display: inline-block; 
  margin-left: 3px; 
  font-family: Arial, sans-serif; 
} 
 
a.rm-viewdetails { 
  color: #e6b741; 
  font-weight: 500; 
} 
 
 
 
a.rm-viewdetails:hover { 
  color: #000; 
} 
 
.rm-close { 
  background: #55b8e0; 
  text-transform: uppercase; 
  display: block; 
  position: absolute; 
  color: #fff; 
  font-size: 11px; 
  font-weight: 500; 
  line-height: 15px; 
  padding: 2px 5px; 
  top: -19px; 
  opacity: 0; 
  right: 30px; 
  cursor: pointer; 
} 
 
.rm-close-modal { 
  cursor: pointer; 
  right: 21px; 
  top: 21px; 
  display: block; 
  position: absolute; 
  width: 16px; 
  height: 16px; 
  background: #2a323f; 
  color: white; 
  text-align: center; 
  line-height: 14px; 
  font-size: 15px; 
  font-family: Arial, sans-serif; 
} 
 
 
/* Transitions */ 
 
.rm-wrapper, 
.rm-wrapper > div { 
  -webkit-transition: all 0.6s ease-in-out, height 0s; 
  -moz-transition: all 0.6s ease-in-out; 
  -o-transition: all 0.6s ease-in-out, height 0s; 
  -ms-transition: all 0.6s ease-in-out, height 0s; 
  transition: all 0.6s ease-in-out, height 0s; 
} 
 
 
.rm-close { 
  -webkit-transition: all 0.1s ease-in-out 0s; 
  -moz-transition: all 0.1s ease-in-out 0s; 
  -o-transition: all 0.1s ease-in-out 0s; 
  -ms-transition: all 0.1s ease-in-out 0s; 
  transition: all 0.1s ease-in-out 0s; 
} 
 
.rm-container.rm-open .rm-close { 
  -webkit-transition: all 0.3s ease-in-out 0.8s; 
  -moz-transition: all 0.3s ease-in-out 0.8s; 
  -o-transition: all 0.3s ease-in-out 0.8s; 
  -ms-transition: all 0.3s ease-in-out 0.8s; 
  transition: all 0.3s ease-in-out 0.8s; 
  opacity: 1; 
} 
 
.rm-container.rm-open .rm-wrapper > div { 
  box-shadow: 0 4px 5px -3px rgba(0,0,0,0.6); 
} 
 
.rm-container.rm-open .rm-cover { 
  -webkit-transform: rotateY(-180deg); 
  -webkit-transition-delay: 0s; 
  -moz-transform: rotateY(-180deg); 
  -moz-transition-delay: 0s; 
  -o-transform: rotateY(-180deg); 
  -o-transition-delay: 0s; 
  -ms-transform: rotateY(-180deg); 
  -ms-transition-delay: 0s; 
  transform: rotateY(-180deg); 
  transition-delay: 0s; 
} 
 
.rm-container.rm-open .rm-right { 
  -webkit-transform: rotateY(180deg); 
  -webkit-transition-delay: 0.2s; 
  -moz-transform: rotateY(180deg); 
  -moz-transition-delay: 0.2s; 
  -o-transform: rotateY(180deg); 
  -o-transition-delay: 0.2s; 
  -ms-transform: rotateY(180deg); 
  -ms-transition-delay: 0.2s; 
  transform: rotateY(180deg); 
  transition-delay: 0.2s; 
} 
 
.rm-container.rm-in .rm-cover { 
  -webkit-transform: rotateY(-150deg); 
  -moz-transform: rotateY(-150deg); 
  -o-transform: rotateY(-150deg); 
  -ms-transform: rotateY(-150deg); 
  transform: rotateY(-150deg); 
} 
 
.rm-container.rm-in .rm-right { 
  -webkit-transform: rotateY(150deg); 
  -moz-transform: rotateY(150deg); 
  -o-transform: rotateY(150deg); 
  -ms-transform: rotateY(150deg); 
  transform: rotateY(150deg); 
} 
 
.rm-container.rm-in .rm-wrapper { 
  -webkit-transform: translateZ(-500px); 
  -moz-transform: translateZ(-500px); 
  -o-transform: translateZ(-500px); 
  -ms-transform: translateZ(-500px); 
  transform: translateZ(-500px); 
} 
 
.rm-container.rm-in .rm-cover,  
.rm-container.rm-in .rm-right, 
.rm-container.rm-nodelay .rm-right { 
  -webkit-transition-delay: 0s; 
  -moz-transition-delay: 0s; 
  -o-transition-delay: 0s; 
  -ms-transition-delay: 0s; 
  transition-delay: 0s; 
} 
 
.rm-container.rm-in { 
  -webkit-transform: translateZ(0px); 
  -moz-transform: translateZ(0px); 
  -o-transform: translateZ(0px); 
  -ms-transform: translateZ(0px); 
  transform: translateZ(0px); 
  opacity: 1; 
  pointer-events: auto; 
} 
 
/* Fallback (similar to last media query) */ 
 
.no-csstransforms3d .rm-container { 
  width: 100%; 
  height: auto; 
  max-width: 460px; 
} 
.no-csstransforms3d .rm-wrapper,  
.no-csstransforms3d .rm-wrapper > div, 
.no-csstransforms3d .rm-wrapper > div > div { 
  position: relative; 
  width: 100%; 
  height: auto; 
} 
 
.no-csstransforms3d .rm-wrapper > div > div{ 
  margin-bottom: 10px; 
  /*box-shadow:  
    inset 0 0 0 16px #fff,  
    inset 0 0 0 17px #e6b741,  
    inset 0 0 0 18px #fff,  
    inset 0 0 0 19px #e6b741,  
    inset 0 0 0 20px #fff,  
    inset 0 0 0 21px #e6b741, 
    0 3px 5px rgba(0,0,0,0.2);*/ 
} 
 
.no-csstransforms3d .rm-container .rm-back { 
  -webkit-transform: rotateY(0deg); 
  -moz-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
} 
 
.no-csstransforms3d .rm-overlay,  
.no-csstransforms3d .rm-middle .rm-overlay { 
  display: none; 
} 
 
.no-csstransforms3d .rm-right .rm-front { 
  display: none; 
} 
 
.no-csstransforms3d .rm-button-open { 
  pointer-events: none; 
} 
 
.no-csstransforms3d .rm-button-open:after { 
  content: '\2193'; 
} 
 
.no-csstransforms3d { 
  position: fixed; 
  width: 80%; 
  top: 50%; 
  left: 50%; 
  margin: 0 0 0 -40%; 
  -webkit-transition: opacity 0.6s ease-in-out 0s; 
  -moz-transition: opacity 0.6s ease-in-out 0s; 
  -o-transition: opacity 0.6s ease-in-out 0s; 
  -ms-transition: opacity 0.6s ease-in-out 0s; 
  transition: opacity 0.6s ease-in-out 0s; 
} 
 
.no-csstransforms3d .rm-container.rm-in .rm-cover, 
.no-csstransforms3d .rm-container.rm-in .rm-right, 
.no-csstransforms3d .rm-container.rm-in .rm-wrapper { 
  -webkit-transform: rotateY(0deg); 
  -webkit-transition-delay: 0s; 
  -moz-transform: rotateY(0deg); 
  -moz-transition-delay: 0s; 
  -o-transform: rotateY(0deg); 
  -o-transition-delay: 0s; 
  -ms-transform: rotateY(0deg); 
  -ms-transition-delay: 0s; 
  transform: rotateY(0deg); 
  transition-delay: 0s; 
} 
 
/* Media Queries */ 
 
@media screen and (max-width: 1110px) { 
  .rm-container { 
    height: 800px; 
  } 
} 
 
@media screen and (max-width: 960px) { 
  .rm-container { 
    width: 100%; 
    height: auto; 
    max-width: 460px; 
    -webkit-perspective: 0px; 
    -moz-perspective: 0px; 
    -o-perspective: 0px; 
    -ms-perspective: 0px; 
    perspective: 0px; 
  } 
  .rm-wrapper,  
  .rm-wrapper > div, 
  .rm-wrapper > div > div { 
    position: relative; 
    width: 100%; 
    height: auto; 
  } 
 
  .rm-wrapper > div > div{ 
    margin-bottom: 10px; 
   /* box-shadow:  
      inset 0 0 0 16px #fff,  
      inset 0 0 0 17px #e6b741,  
      inset 0 0 0 18px #fff,  
      inset 0 0 0 19px #e6b741,  
      inset 0 0 0 20px #fff,  
      inset 0 0 0 21px #e6b741, 
      0 3px 5px rgba(0,0,0,0.2);*/ 
  } 
 
  .rm-container .rm-back, 
  .rm-container.rm-open .rm-cover, 
  .rm-container.rm-open .rm-right { 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
  } 
 
  .rm-overlay, .rm-middle .rm-overlay { 
    background: transparent; 
  } 
 
  .rm-right .rm-front, 
  .rm-close { 
    display: none; 
  } 
 
  .rm-button-open { 
    pointer-events: none; 
  } 
 
  .rm-button-open:after { 
    content: '\2193'; 
  } 
 
  .rm-container { 
    position: fixed; 
    width: 80%; 
    top: 50%; 
    left: 50%; 
    margin: 0 0 0 -40%; 
    -webkit-transform: translateZ(0px); 
    -moz-transform: translateZ(0px); 
    -o-transform: translateZ(0px); 
    -ms-transform: translateZ(0px); 
    transform: translateZ(0px); 
    -webkit-transition: opacity 0.6s ease-in-out 0s; 
    -moz-transition: opacity 0.6s ease-in-out 0s; 
    -o-transition: opacity 0.6s ease-in-out 0s; 
    -ms-transition: opacity 0.6s ease-in-out 0s; 
    transition: opacity 0.6s ease-in-out 0s; 
  } 
 
  .rm-container.rm-in .rm-cover, 
  .rm-container.rm-in .rm-right, 
  .rm-container.rm-in .rm-wrapper { 
    -webkit-transform: rotateY(0deg); 
    -webkit-transition-delay: 0s; 
    -moz-transform: rotateY(0deg); 
    -moz-transition-delay: 0s; 
    -o-transform: rotateY(0deg); 
    -o-transition-delay: 0s; 
    -ms-transform: rotateY(0deg); 
    -ms-transition-delay: 0s; 
    transform: rotateY(0deg); 
    transition-delay: 0s; 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
 
    $(function() { 
        Menu.init(); 
    }); 
</script> 
<div class="fade"> 
                <section class="main"> 
                    <div id="rm-container" class="rm-container"> 
                        <div class="rm-wrapper"> 
                            <div class="rm-cover"> 
                                <div class="rm-front"> 
                                    <div class="rm-content"> 
                                    
                                        <a href="#" class="rm-button-open">Открой меня</a> 
                                    </div><!-- /rm-content --> 
                                </div><!-- /rm-front --> 
                                <div class="rm-back"> 
                                    <div class="rm-content"> 
 
                                        <h4>апр</h4> 
                                        
                                        <ul> 
                                            <li class="liOpis"></li> 
                                            <li class="liOpis"></li> 
                                            <li class="liOpis"></li> 
                                        </ul> 
                                    </div><!-- /rm-content --> 
                                     
                                </div><!-- /rm-back --> 
                            </div><!--/rm-cover --> 
                            <div class="rm-middle"> 
                                <div class="rm-inner"> 
                                    <div class="rm-content"> 
                                        <h4>апрап</h4> 
                                        <img src="static/images/Diagram.png"> 
                                    </div><!-- /rm-content --> 
                                </div><!-- /rm-inner --> 
                            </div><!-- /rm-middle --> 
                            <div class="rm-right"> 
                                <div class="rm-front"> 
                                </div> 
                                <div class="rm-back"> 
                                    <span class="rm-close" data-dismiss="modal">Close</span> 
                                    <div class="rm-content"> 
                                        <h4>Записаться</h4> 
                                       <form> 
                                          <div class="form-group"> 
                                            <label for="exampleInputPassword1">Ф.И.О</label> 
                                            <input  class="form-control" id="fio" placeholder="Ф.И.О"> 
                                          </div> 
                                          <div class="form-group"> 
                                            <label for="exampleInputEmail1">Email</label> 
                                            <input type="email" class="form-control" id="Email" aria-describedby="emailHelp" placeholder="Введите email"> 
                                          </div> 
                                          <div class="form-group"> 
                                            <label for="exampleInputPassword1">Телефон</label> 
                                            <input type="phone" class="form-control" id="phone" placeholder="Телефон"> 
                                          </div> 
                                          <button type="submit" class="btn btn-primary">Записаться</button> 
                                        </form> 
                                            <span>Осталось:&nbsp;</span><span class="afss_day_bv">0</span> д. 
                                            <span class="afss_hours_bv">00</span>&nbsp;час.&nbsp;<br> 
                                            <span class="afss_mins_bv">00</span>&nbsp;мин.&nbsp; 
                                            <span class="afss_secs_bv">00&nbsp;</span>&nbsp;сек. 
                                            <p></p> 
                                    </div><!-- /rm-content --> 
                                </div><!-- /rm-back --> 
                            </div><!-- /rm-right --> 
                        </div><!-- /rm-wrapper --> 
                    </div><!-- /rm-container --> 
                </section> 
            </div>

READ ALSO
Как изменить выбранную опцию в select?
javascript

Как изменить выбранную опцию в select?

Доброго времени сутокКак можно выбрать соответствующую опцию в select при клике на одну из строк таблицы ? т

 274
Как сделать задержку и анимацию между переключениями?
javascript

Как сделать задержку и анимацию между переключениями?

Здравствуйте! Есть такой фрагмент скрипта, который переключает вперед/назад блоки:

 433
Разграничение доступа пользователей к web ресурсам
javascript

Разграничение доступа пользователей к web ресурсам

Имеется web-приложение, в которое входит api, например, оно доступно по localhost/api

 304
JavaScript Живой поиск по элементам
javascript

JavaScript Живой поиск по элементам

Пытаюсь реализовать живой поискПри вводе букв в input необходимо отобразить блок div, исходя из набранного текста

 263