我可以显示/隐藏div的一部分吗？

我正在创建包含网站表格的侧边栏。我可以显示/隐藏div的一部分吗？

我想：

只有五排通过点击侧边栏15行会显示与链接文本将改变底部的链接在第一
显现。
当div完全打开时，通过再次单击链接，边栏只会再次显示前五个并且链接文本会再次变回第一个。

所以我正在寻找某种切换div功能来为我做这个，但我希望div的一部分始终可见。

这里是我的侧边栏的截图：http://cl.ly/image/390J2u2z1W1Z

是否有任何人谁拥有很好的解决了我的问题？

来源

2012-11-26 DrMtotheac

@Caribou嗯，我们是非常有帮助反正...见下文...... – jtheman

@jtheman洛尔 - 我应该有看起来我需要一个休息我想:) – Caribou

将您的主<div>分为多个，更小的<div> s ...然后只是隐藏您的内部整体<div> s。用jQuery的.toggle或.hide/.show函数。

来源

2012-11-26 14:13:04 Darrrrrren

这一切都取决于你的内容是什么，但最简单的方法是改变div高度以符合你的要求或使用两个div（一个用于“缩短”版本，另一个用于“完整”并相应地显示/隐藏它们。

来源

2012-11-26 14:13:15

添加一个类你不要行要显示第一

<tr class="toggle"> ..... </tr>

CSS：

tr.toggle { display: none; }

Sideba [R链接：

<a href="#" id="toggle">Toggle</a>

然后使用jQuery切换（）来开启和关闭

<script> 
    $(function(){ 
    $('a#toggle').click(function(e) 
    { 
     e.preventDefault(); 
     $('tr.toggle').toggle(); 
    }); 

    }); 
</script>

来源

2012-11-26 14:15:02 jtheman

对不起，但更改为slideToggle（）没有任何区别，它仍然是相同的。任何线索为什么？这里是演示：http://jsfiddle.net/matmuchrapna/ZAtX8/5/ – DrMtotheac

啊。这是由于表行不具有默认高度。请参阅http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row因此，如果您将表格改为DIV，最简单。 – jtheman

只要检查该demo

JS：

$('.js_toggle').on('click', function(event) { 
    $('table').toggleClass('full-table'); 

    event.preventDefault(); 
});

HTML：

<table> 
    <tr> 
     <td>tr01</td> 
     <td>tr02</td> 
    </tr> 
    … 
    <tr> 
     <td>tr01</td> 
     <td>tr02</td> 
    </tr> 
</table> 

<a href="#" class="js_toggle">toggle_table</a>

CSS：

table tr:nth-child(n+6) { 
    display: none; 
} 

table.full-table tr { 
    display: block; 
}

来源

2012-11-26 14:26:03

这比我的解决方案还要好！ – jtheman

我认为tr的默认显示模式是display：table-row？（不封锁） – jtheman

谢谢！有没有办法让隐藏的内容在切换时滑下来？我也在寻找一种方法来改变点击链接文字，你知道我能做到吗？下面是我的侧边栏的截图：http://cl.ly/image/390J2u2z1W1Z 再次感谢！ – DrMtotheac

我可以显示/隐藏div的一部分吗？

回答

相关问题