Question

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

<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>

我没有看到与演示有什么不同......

Answer 1

而不是做

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

删除display:none，只需执行

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

或者，如果您希望它向下滑动，您甚至可以

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

参考：

jQuery .show()
jQuery .slideDown()

Demo

Answer 2

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

您的代码无法正常工作，因为您尝试将带有隐藏文字ID的项目的样式取消，但您的文字却有一组隐藏文字。你想要这个：

<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>

注意到。在您拥有的属性行＃中，老实说，show是一个更好的解决方案

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

单击jquery更改样式（context = bootstrap）

2 个答案: