0

所以我有这个文本字段太大而无法显示，但你想要一个按钮来显示其余部分：

<div class="span4" >
    some description..
    <div class="hidden-text" style="display:none">
        rest of description<br/>
    </div>
    <a href="#" class="btn" id="readmore"><i class="icon-chevron-up"></i> Read more</a>
    <script>
    $("#readmore").click(function(){
        $('#hidden-text').attr('style', '');
    });
    </script>
</div>

为什么这不起作用，应该如何做？

编辑：

感谢演示，不幸的是我无法复制它

<div class="span4" >
    some description..
    <style>
    .hidden-text {
        display:none;
    }​
    </style>
    <p class="hidden-text">rest of description<br/></p>
    <br/><br/>
    <a href="#" class="btn" id="readmore"><i class="icon-chevron-down"></i> Read more</a>
    <script>
    $(document).ready(function(){
        $('.readmore').on('click', function(){
            $('.hidden-text').slideDown('slow');
            });
    });​
    </script>
</div>

我看不出与演示有什么不同...

4

2 回答 2

2

而不是做

$('#hidden-text').attr('style', '');

要删除display:none，只需执行

$('#hidden-text').show()

或者，如果你想让它向下滑动，你甚至可以这样做

$('#hidden-text').slideDown();

参考：

jQuery .show()
jQuery .slideDown()

演示

于 2012-11-11T23:20:49.787 回答
1

确保您在页面上引用了 jQuery。

您的代码无法正常工作，因为您试图从 id 为 hidden-text 的项目中删除样式，但您的文本具有隐藏文本的 CLASS。你要这个：

<div class="span4" >
some description..
<div class="hidden-text" style="display:none">
    rest of description<br/>
</div>
<a href="#" class="btn" id="readmore"><i class="icon-chevron-up"></i> Read more</a>
<script>
$("#readmore").click(function(){
    $('.hidden-text').attr('style', '');
});
</script>
</div>

注意 . 在你有#的属性行中，老实说，这个节目是一个更好的解决方案

$('.hidden-text').show();
于 2012-11-11T23:39:59.270 回答