3

我想在悬停事件时显示完整日历事件的下拉列表。谁能帮我吗？

这是我目前的屏幕截图

在此处输入图像描述

我希望将下拉列表放在我尝试过 z-index 但无法排在首位的所有其他内容之上。

我不想要工具提示我只想要一个悬停事件的下拉列表。

我尝试将完整日历选项设置为的代码：

eventRender: function (eventObj, $element) {            
        //$element.popover({                
        //    title: eventObj.title,                
        //    content: function () {                                       
        //        return $scope.getToolTipData("","");
        //    },
        //    trigger: 'hover',
        //    placement: 'bottom',
        //    container: 'body'
        //});
        $element.addClass('dropdown');
        $element.append($scope.getToolTipData("","",eventObj.id));
    },
    eventMouseover: function (calEvent, jsEvent) {
        console.log(calEvent);
        $(this).css('z-index', 10000);            
    },
    eventMouseout: function (calEvent, jsEvent) {            
    }

函数 getToolTipData() 将下拉列表作为 ul 元素返回，这里是：

<ul class="dropdown-menu tooltipevent" id="eventDropdown">
<li>
    <a href="#">
        <div class="media">
            <div class="media-left">
                <span class="icon icon-github icon-2x icon-fw"></span>
            </div>
            <div class="media-body">
                GitHub<br>
                <small>Clone with an SSH key from your GitHub settings.</small>
            </div>
        </div>
    </a>
</li>
<li>
    <a href="#">
        <div class="media">
            <div class="media-left">
                <span class="icon icon-bitbucket icon-2x icon-fw"></span>
            </div>
            <div class="media-body">
                Bitbucket<br>
                <small>Clone with an SSH key from your Bitbucket settings.</small>
            </div>
        </div>
    </a>
</li>
<li>
    <a href="#">
        <div class="media">
            <div class="media-left">
                <span class="icon icon-bitbucket icon-2x icon-fw"></span>
            </div>
            <div class="media-body">
                Bitbucket<br>
                <small>Clone with an SSH key from your Bitbucket settings.</small>
            </div>
        </div>
    </a>
</li>
</ul>

这是完整日历的样式更改我如何让它悬停

.fc-event:hover .tooltipevent {                
    z-index: 10001 !important;
    display:block !important;               
}

目前它只显示在事件的顶部和当天的那个单元格内，希望它在那个单元格的顶部。

提前致谢。

4

1 回答 1

0

直到 2020 年，我找到了解决方案。

下拉菜单位于下一行（周）下方，因为下一行的 z-index 较高。如果设置下拉菜单的 z-index，这不会影响到下拉菜单，因为下拉菜单是行的嵌套。

下面是在 eventRender 中创建下拉列表的示例：

eventRender: function(info) {
        let element = $(info.el);

        element.find('.fc-content').attr("data-toggle", "dropdown");
        element.append('\
            <div class="dropdown-menu mt-2 mb-2">\
                <a class="dropdown-item" href="#"><i class="la la-bell"></i> Action</a>\
                <a class="dropdown-item" href="#"><i class="la la-cloud-upload"></i> Another action</a>\
                <a class="dropdown-item" href="#"><i class="la la-cog"></i> Something else</a>\
            </div>\
        ');

        element.on('show.bs.dropdown', function() {
            element.parent().parent().parent().parent().parent().parent().css('z-index', '60');
        });
        element.on('hide.bs.dropdown', function() {
            element.parent().parent().parent().parent().parent().parent().css('z-index', '');
        });
    },

只需使用下拉菜单的“show.bs.dropdown”事件，不要使用元素的点击事件。因为这与下拉的点击事件冲突（这导致元素触发的点击事件只是一次）。

于 2020-08-12T15:34:01.673 回答