0

我正在将 Foundation 3 用于我不久前做的一个网站，它使用下拉按钮。一切都很好，但我必须通过 Ajax 加载一个表单和一些按钮。通过 Ajax 进入的按钮不起作用（它们只是无法打开）。到目前为止，我无法找到解决方案。我也试过打电话：

  $(document).foundationButtons();

或者

  $(mySelector).foundationButtons();

Ajax 调用完成后，但两者都导致破坏整个页面上的所有下拉按钮。请帮忙。

谢谢。

这是我通过 Ajax 加载的代码。

 <div href="#" class="button dropdown">
     Edit
     <ul>
         <li><a href="#" class="internal">Internal Data</a></li>
         <li><a href="#" class="external">External Data</a></li>
         <li class="divider"></li>
         <li><a href="#" class="settings">Settings</a></li>
     </ul>
 </div>

该调用通过常规 jQuery $.ajax(); 常规。这里的问题是下拉按钮在通过 Ajax 注入页面后没有被 Foundation 呈现。

4

2 回答 2

0

对于遇到类似问题的任何人，我设法通过以下方式解决...

https://github.com/zurb/foundation/issues/4587

$('#elementId').foundation('dropdown', 'reflow'); <-- 我在创建 html 之后添加了这个。

注意，应该应用于容器，而不是实际的下拉链接。

于 2014-08-02T08:11:25.390 回答
0

自从我问这个问题以来已经有一段时间了，我自己弄清楚了。下拉按钮在通过 Ajax 注入页面后根本不起作用。我写了一个 jQuery 插件来解决这个问题：

$.fn.prettyButtons = function(){
    $('.button.dropdown > ul').addClass('no-hover');
    var u = $(".button.dropdown:not(.large):not(.small):not(.tiny):visible", this).outerHeight() - 1,
            a = $(".button.large.dropdown:visible", this).outerHeight() - 1,
            f = $(".button.small.dropdown:visible", this).outerHeight() - 1,
            l = $(".button.tiny.dropdown:visible", this).outerHeight() - 1;
   $(".button.dropdown:not(.large):not(.small):not(.tiny) > ul", this)
   .css("top", u), $(".button.dropdown.large > ul", this)
   .css("top", a), $(".button.dropdown.small > ul", this).css("top", f),   
   $(".button.dropdown.tiny > ul", this).css("top", l), 
   $(".button.dropdown.up:not(.large):not(.small):not(.tiny) > ul", this)
   .css("top", "auto")
   .css("bottom", u - 2), $(".button.dropdown.up.large > ul", this)
   .css("top", "auto")
   .css("bottom", a - 2), $(".button.dropdown.up.small > ul", this)
   .css("top", "auto")
   .css("bottom", f - 2), $(".button.dropdown.up.tiny > ul", this)
   .css("top", "auto")
   .css("bottom", l - 2);
}

这只是重复 Foundation 运行的所有步骤以按需创建按钮。用法很简单：

$('.selector').prettyButtons();

以防万一有人遇到这个问题。

于 2013-08-25T11:16:55.597 回答