带有 rwdImageMaps 的图像映射 + 响应式选项卡答案

【问题标题】：Image Maps + Responsive Tabs with rwdImageMaps带有 rwdImageMaps 的图像映射 + 响应式选项卡
【发布时间】：2015-06-10 06:10:31
【问题描述】：

我正在寻找一种将rwdImageMaps 功能添加到名为 Divi 的 Wordpress 主题中的预构建选项卡模块的方法。

我找到了一种方法，通过使用以下代码，使图像映射 + 响应式“手风琴”适用于带有 rwdImageMaps 的 Divi 主题：(Example of Divi Theme Accordian Module)

jQuery('.et_pb_toggle').click(function(){
    jQuery('img[usemap]').rwdImageMaps();
});

但是，我很难找到使预建“标签”模块以类似方式工作的触发器。 (Example of Divi Theme Tabs Module)

有没有办法让单击列表项在单独的 div 中启动 rwdImageMaps？

我一直在尝试的想法是，如果您单击 .et_pb_tabs_controls li，然后激活相应的 .et-pb-active-slide 以触发图像地图坐标...

这是一个结构示例：

<div class="et_pb_tabs">
<ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
</ul>
<div class="et_pb_all_tabs">
    <div class="et_pb_tab clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 2; display: none; opacity: 0;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 1; display: none; opacity: 0;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 1; display: none; opacity: 0;">content</div>
</div>

由于这是一个预构建的模块，我希望能够添加额外的 JavaScript 来帮助触发在隐藏选项卡内设置图像地图坐标的能力。

更新：我在下面添加了此代码，但它需要您单击图像地图两次才能设置坐标。不理想，但找不到一键触发它的方法：

$(function(){
$(".et_pb_row").click(function ( ) {
      $(window).trigger('resize'); 
 });
})

【问题讨论】：

标签： javascript jquery wordpress responsive-design imagemap

【解决方案1】：

好的，我不确定这是不是正确的代码，但到目前为止，我在桌面和移动设备以及调整页面大小时都适用：

为图像映射调用 rwdImageMaps 以调整大小：

 $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

当鼠标悬停在选项卡上时启动要重置的坐标：

$(function(){
$(".et_pb_tabs_controls").hover(function ( ) {
      $(window).trigger('resize'); 
 });
})

【讨论】：