Я пытаюсь развить руководство, которое я нашел в Co-drops для меню (http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/comment-page-1/#comments) . Что мне действительно нравится в этом меню, так это то, что когда вы нажимаете на элемент, появляется модальное окно с подробной информацией о еде.
В моей версии у меня есть разные разделы меню в разных div, все с одним и тем же классом. (см. HTML ниже)
<div id="rm-container1" class="rm-container">
<div class="rm-wrapper">
<div class="rm-left">
<div class="rm-inner">
<div class="rm-content">
<dl>
<dt><a href="#" class="rm-viewdetails" data-thumb="images/2.jpg">26. Phở Tái, Nạm, Gầu, Sách - $6.50</a></dt>
<dd>Rice noodle soup with eye round steak, well done flank, fat brisket & tripe</dd>
</dl>
</div><!-- /rm-content-->
<div class="rm-overlay"></div>
</div><!-- /rm-inner-->
</div><!-- /rm-right-->
</div><!-- /rm-wrapper-->
</div><!-- /rm-container-->
<div id="rm-container2" class="rm-container">
...
</div>
см. Javascript ниже
var Menu = (function() {
var $container = $( '#rm-container1' ),
$left = $container.find( 'div.rm-cover' ),
$middle = $container.find( 'div.rm-middle' ),
$right = $container.find( 'div.rm-right' ),
$open = $left.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 $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
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 };
})();
Я только хочу, чтобы модальное окно отображалось в div, когда моя мышь закончилась, поэтому я попытался добавить hover + toggleClass в initEvents и установить var $container = $('.xyz'), но это привело к тому, что модальное не работает вообще . Я считаю, что мне нужно исправить 3-ю строку в javascript (var $container = $('#xyz')), чтобы сделать xyz любым div, над которым я завис (например, rm-container1, rm-container2). Как мне это сделать?
Я безуспешно пробовал множество решений из связанных тем на этом сайте. У кого-нибудь есть идеи, как решить эту проблему? Или есть лучший способ достичь моих целей? Любые мысли/помощь приветствуются :-)
