Question

我正在尝试使用下拉菜单在网站上创建一个网站。

但是我注意到，当我点击某些链接时，控制台上出现错误

未捕获的TypeError：t.getBoundingClientRect不是函数

at i (catalog-list-pack-d7c9d20e63.js:4)
at Object.e [as ImNotTouchingYou] (catalog-list-pack-d7c9d20e63.js:4)
at e.value (catalog-list-pack-d7c9d20e63.js:5)
at HTMLLIElement.s (catalog-list-pack-d7c9d20e63.js:5)
at HTMLLIElement.dispatch (catalog-list-pack-d7c9d20e63.js:2)
at HTMLLIElement.y.handle (catalog-list-pack-d7c9d20e63.js:2)

这个破解的代码是来自基金会的插件。

我的调试让我得出结论，如果我删除了课程is-dropdown-submenu-parent一切正常。

这个课程来自基金会，我担心我会在其他地方插入错误，因为我不明白发生了什么。

另一件事 - 它不仅适用于Chrome和Opera。它适用于Mozzila甚至Microsoft Edge（新的Internet Explorer）

以下是有关如何创建下拉列表的代码

<div class="MegaMenu__row">
     <div class="MegaMenu__listColumn">
       <dt class="is-dropdown-submenu-parent MegaMenu__item MegaMenu__item--
           header MegaMenu__item--no-bullet">
           <a href="/somewhere</a>
       </dt>

以下是更多可行的链接。

关于破坏其最小化插件并从中获取所有内容的代码是棘手的，但这是破坏的功能。我试图让它更具可读性，我不知道Dave是谁。

   function f(t,e) {
      if(t=t.length?t[0]:t,t===window||t===document)
        throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");
      var f=t.getBoundingClientRect(),
      o=t.parentNode.getBoundingClientRect(),
      i=document.body.getBoundingClientRect(),
      s=window.pageYOffset,
      h=window.pageXOffset;
    return{
            width:f.width,
            height:f.height,
            offset:{top:f.top+s,left:f.left+h},
            parentDims:{
                          width: o.width,
                          height: o.height,
                          offset{
                                   top:o.top+s,
                                   left:o.left+h
                                 }
                        },
            windowDims:{
                         width:i.width,
                         height:i.height,
                         offset:{
                                  top:s,
                                  left:h
                                 }
                        }
           }
    }

有人可以向我解释为什么js功能会在Opera和Chrome上中断吗？

Answer 1

如果它对任何人有帮助，我们在与OP相同的浏览器上遇到相同的错误，但在我们的情况下，当用户调整视口大小时就会发生错误。

原因是原因是下拉菜单中没有相应的父级来触发它。

例如：

<li data-toggle="someDropDown">
    <a href="#">OPEN DROPDOWN</a>
</li>

<div id="someDropDown" data-dropdown  data-resize="someDropDown" data-events="resize">
    <div>The dropdown</div>
</div>

这样可以正常工作。如果我从代码中删除第一个li，则在调整窗口大小时，Foundation会抛出错误。

换句话说，这是Foundation 6中的一个错误。它应该处理下拉菜单订阅resize事件并且缺少父级的情况。

is-dropdown-submenu-parent使Opera和Chrome上的链接无法点击

1 个答案: