css – Twitter的Typeahead – 调试渲染的HTML?

调试Twitter的Typeahead脚本时遇到问题.由于某些原因,以下标题显示正常…
header: '<h3 class="tt-title">Ads</h3>',

但是当我把这个H3交换出来,

header: '<div class="tt-title">Ads</div>',

我得到空格.我知道有些东西是渲染,但文本现在显示出来.我有一种感觉这是一个CSS问题,但是我无法在开发人员工具中查看下拉列表中呈现的HTML.在我有机会在源代码中导航之前,下拉关闭自动关闭.

任何人知道如何防止它关闭一旦打开?我正在使用Chrome的开发人员工具.

解决方法

我以前从来没有使用过Typeahead,但是我检查了他们的文档和他们的 demo-page.这确实有点棘手.

无论如何,它可以使用这个简单的脚本,您可以粘贴到浏览器控制台,这迫使您的Typeahead搜索框打开,并保持打开,而你在元素检查器中戳:

$('.typeahead').focus().typeahead('val','').focus().typeahead('val','what ever value you want to test');

至少在chrome中,建议框甚至保持打开右键单击>检查元素.

更新; OP要求更广泛的解释:

上面的代码是jQuery,并带有一个选择器 – 包含Typeahead的元素.截图:

此示例中的选择器专用于Typeahead库的演示页面.您可能需要根据您如何初始化自己的Typeahead进行调整.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效