Foundation Modal with dropdown:防止关闭模态

Foundation Modal with drowdown: Prevent from closing the modal

大家好,我有一个带有下拉菜单的模式:

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();  
})

我想要的是当下拉菜单打开时我想关闭它,而不选择任何东西,以防止模式也成为 closed/dismissed。

我该怎么做?

注意:我使用的是 Foundation 5.5.1 版本。

代码笔:http://codepen.io/anon/pen/YWKvKm

我把基础升级到了5.5.3版本。后续版本修复问题