Question

我正在尝试开发一个我在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上，所以我尝试在initEvents中添加hover + toggleClass，并设置var $ container = $（'。xyz'），但这导致模态不会工作。 我相信我需要修复javascript中的第3行（var $ container = $（'＃xyz'），）以使xyz成为我所悬停的div（即rm-container1，rm-container2）。我该怎么做？

我在这个网站上尝试了很多来自相关主题的解决方案而没有太多运气。有没有人碰巧知道如何解决这个问题？或者有更好的方法来实现我的目标吗？非常感谢任何想法/帮助:-)

Answer 1

如下所示排列代码，然后立即致电Menu.init();。

jQuery(function ($) {
    var Menu = (function(){
        ...
        init: function(){}
        return {
            init: init
        };
    })();
    Menu.init();
});

查看 JSFIDDLE

<强>更新

在viewDetails功能更改

中

$modal.appendTo($container);和

$container.addClass('rm-in rm-nodelay');

到

$modal.appendTo(recipe.parents('.rm-container'));和

recipe.parents('.rm-container').addClass('rm-in rm-nodelay');

分别

问题是有2 $container个。因此，您必须定位特定于您的食谱的容器，因此recipe.parents('.rm-container')。

<强> NB

守则相当混乱，可以通过一些重构来实现。

更新Fiddle

切换类添加类冲突+显示模态

1 个答案: