Question

你好伙伴我有一个下拉模式：

Value:<span data-bind="text:value"></span><br>
<a data-bind="click:reveal" > Reveal Modal</a>



    <div data-bind="modal:showModal" class="reveal-modal" data-reveal >
    <a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
  <li data-bind="click:duplicate">Double value</li>
  <li data-bind="click:inc">Inc value</li>
</ul>
<p>


Occaecati ut quae deleniti repudiandae corporis. Cum sed similique repellendus cum omnis. Tempora sit dolore consequatur ut quas. Enim praesentium aut a voluptatum accusantium.

Voluptatem corrupti cum ut consequatur quae eos. Eius est ad aut. Neque praesentium consequatur quisquam eum. Quos id sunt rerum. Esse eos voluptas quisquam commodi magnam. Aspernatur fugit cum nemo.

Saepe eius possimus et aut officiis. Iusto culpa aliquam asperiores ipsam. Perspiciatis ad et vero. Quos omnis asperiores qui neque aut expedita cum in. Iure ducimus minus voluptatem a. Libero ab aspernatur tempora fugit sed.

Rerum quas et quo occaecati laboriosam. Consequuntur recusandae autem vel et sed asperiores ipsum alias. Doloribus qui minus ipsam modi eveniet. Pariatur ut quisquam eius quidem ratione.

Voluptas in voluptas consectetur nihil qui qui iste. Nihil tempore eaque saepe placeat. Et eveniet dolores velit. Molestiae quia accusantium saepe est. Et earum consequatur consectetur aliquam accusamus pariatur quia. Itaque et nihil voluptatibus pariatur reprehenderit.
</p>
</div>

以下html包含以下js：

    ko.bindingHandlers.modal = {
      init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(document).on('closed.fndtn.reveal', '[data-reveal]', function() {
          if (this === element) {
            valueAccessor()(false);
          }
        });

        var open_binding = allBindings.get('on_modal_open') || null;
        $(document).on('open.fndtn.reveal', '[data-reveal]', function() {
          if (typeof open_binding === 'function') open_binding();
        });
      },
      update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var newVal = valueAccessor()();
        if (newVal) {
          $(element).foundation('reveal', 'open');
        } else {
          $(element).foundation('reveal', 'close');
        }
      }
    };

function Reveal()
{
  var self=this;
  self.showModal=ko.observable(false);

  self.reveal=function()
  {
    self.showModal(true);
  }

  self.value=ko.observable(0);

  self.duplicate=function()
  {
    self.value(2*self.value())
  }

  self.inc=function()
  {
    self.value(self.value()+1)
  }
}

$(document).ready(function()
{
  ko.applyBindings(new Reveal());
  $(document).foundation();  
})

我想要的是当下拉列表被选中并且我想要关闭它而不选择任何东西时，以防止模态被关闭/解散。

我该怎么做？

注意：我正在使用Foundation 5.5.1版本。

Codepen：http://codepen.io/anon/pen/YWKvKm

Answer 1

我将基础升级到5.5.3版本。更高版本修复了问题

带有drowdown的基础模态：防止关闭模态

1 个答案: