2013-10-07 81 views
0

有没有一个简单的jQuery解决方案,可以执行与html5 details标签相同的下拉功能?我已经看过一些插件,但他们似乎都与越野车。我认为最好现在就用jquery来做?jQuery的详细信息标签替代

HTML5的方式(但是,这并不在IE浏览器)

<details> 
    <summary>Details Summary</summary> 
    <p>Pellentesque aliquet lacinia libero id sodales. Curabitur nibh velit, varius in semper ac, suscipit quis magna. Phasellus faucibus venenatis leo ut convallis. Maecenas tempus risus id nibh iaculis vehicula. Aenean vel quam lorem, et sagittis velit. Nullam a ligula lectus, at iaculis mauris. Mauris id tempus dolor. </p> 
</details> 

jquery的方式吗?

+0

但这至少显示在IE中的内容,是否正确?因此,您只需检测浏览器是否支持详细信息标签,如果不支持,请隐藏段落标签,然后在适当时显示。不需要插件。 –

回答

0
<details> 
    <summary>Details Summary</summary> 
    <p>Pellentesque aliquet lacinia libero...</p> 
</details> 

OR

<div class="details"> 
    <div class="summary">Details Summary</div> 
    <p>Pellentesque aliquet lacinia libero...</p> 
</div> 

调整下面的代码相应地

details > p{display:none;} 

$('body').on('click', 'details summary',function() { $(this).find('p').toggle(); });