twitter bootstrap下拉列表在切换时不会切换

哦，伙计，我一直在撕扯我的头发。 下拉列表4小时。

我正在使用Twitter Bootstrap。

顶部的固定导航有一个下拉，非常标准的东西。

除非下拉列表没有像通常那样关闭。 它只会在按下切换按钮时切换打开和关闭，而不是在按下菜单中的项目或用户在菜单外单击时（这两个都应该关闭下拉列表）。

我唯一不做的就是使用iframe和bootswatch的主题。

我以前没有这样的问题，所以我觉得它可能是一个bug（升级后的bootstrap到2.1.0，jquery到今天的1.7.2）。

这里的所有代码： 

    test      iframe { border: 0px; height: 95%; left: 0px; position: absolute; top: 50px; width: 100%; }    
 
 
  Brand   
 
 
 
   
     $(document).ready(function () { $('.dropdown-toggle').dropdown(); var frameheight = window.innerHeight - 50; document.getElementById("frame").style.height = frameheight + "px"; }); $(window).resize(function () { var frameheight = window.innerHeight - 50; document.getElementById("frame").style.height = frameheight + "px"; });

住在这里： http ： //www.joshlevent.com/dropdownbug/

iframe默认情况下不会将点击事件传播到其父项。 您需要添加代码才能手动执行此操作。 除了能够编辑您正在加载的iframe的内容之外，跨域限制还要求您从与您的网页相同的域中加载iframe内容。

这需要在 iframe页面中运行： 

 $('html').on('click', function () { parent.$('#frame').trigger('click'); });

其中#frame是您的iframe的ID。 您可以将点击委托给父级中的任何内容（例如， 'body' ），这也可以。 取决于您希望将iframe中的内容与页面耦合的紧密程度。

所以，这应该关闭关闭菜单的页面。

重要更新

至于单击菜单项以关闭菜单，显然最新更新（2.0.4> 2.1.0）中存在错误[？]： 选择选项时，下拉菜单不会关闭 。 一个选择器从'.dropdown form'变为'.dropdown' ，所以现在曾经是一个着名的function，使表单中的下拉菜单更容易处理，已演变成一个回调，阻止下拉菜单项的所有点击。

临时解决方案是在修复错误之前包含以下代码（2.1.1）： 

 $('body') .off('click.dropdown touchstart.dropdown.data-api', '.dropdown') .on('click.dropdown touchstart.dropdown.data-api' , '.dropdown form' , function (e) { e.stopPropagation() })

没有什么对我有用，除了这个： 

 $('.dropdown-menu li a').on('click', function(e) { $('.dropdown-toggle').dropdown('toggle'); e.stopPropagation(); });

我在2.1.1看到了同样的问题。

发布在GitHub上的解决方案对我来说很容易：

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

感谢blakeembrey， url是https://github.com/twitter/bootstrap/issues/5094

这是我根据merv的优秀答案实现的完整解决方案。 如果有更好的方式让我为将来发布的解决方案发布解决方案，请告诉我。

这个jquery被添加到框架中页面的html底部： 

 $('html').on('click', function () { parent.$('#frame').trigger('click'); });

下拉菜单切换到一个按钮并重新设置为适合导航栏。 在html中： 

  
  •    Sample  
    •

    在CSS中： 

      #samplebtn { position:absolute; top: 0; margin: 0px; padding: 0px; border: 0px; } #samplebtn .btn { border: 0px; }

    完整的解决方案代码（更新问题中的完整代码 – 这只是外部框架）： 

         test        
     
     
      Brand

    为了完整参考，这是框架内页面的代码： 

         Title          
     
     
    Project Description
     
    Lorem Ipsum Dolor Sit Amet

    固定测试网站，你可以预览（但不要复制整个页面代码，因为它有一些服务器端（cloudflare）的东西）。 http://www.joshlevent.com/dropdownbug/

    该错误现已修复，你可以使用https://github.com/twitter/bootstrap/blob/2.1.1-wip/js/bootstrap-dropdown.js，2.1.1-wip下拉列表

    单击另一个时，您可以从下拉菜单中删除“打开”类。 到目前为止，这对我有用： 

     $(document).ready(function () { $('a.dropdown-toggle').each(function(){ $(this).on("click", function () { $('li.dropdown').each(function () { $(this).removeClass('open'); }); }); }); });

    我在导航菜单中修复了多个下拉菜单：其他解决方案对我不起作用 

     $('.dropdown-toggle').on('click', function (e) { $('.dropdown-toggle').each(function (i,elem) { if (elem != e.target) $(elem.parentElement).removeClass('open'); }); })

    您还可以使用此代码从父页面添加传播点击事件（为我修复了相同的问题）： 

     var myFrameContents = document.getElementById("frame").contentWindow.document; myFrameContents.body.addEventListener("click", function() { document.body.click(); });
    Interesting Posts