Javascript 单击展开div

我在这些论坛上搜索了一种实现“点击jquery展开div”的方法

我找到了一个简单而理想的教程，但在重新编写代码时无法实现它

此代码对当前jquery仍然有效吗？我相信我已经完全复制了演示，只是不确定脚本的链接

以下是我从[链接：

这是我在[link removed]的结果，演示资源文件在这里工作，但是我的代码没有打开，不管是什么原因。也许我链接到的jquery已经改变了

编辑 下面是一段HTML代码

<div class="wrapper">
<div class="small">
<p>Lorem..</p>
</div>
<a href="#">Click...</a>
</div>

洛雷姆

安迪

试试这个：

HTML

jQuery

$('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});

---

将javascript放入document ready事件中。因为在您的示例中，您是在DOM就绪之前执行javascript的

$(document).ready(function()
{
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});

---

您的代码是正确的，因此您可能忘记了准备文档（onDomready）

您可以这样做，将代码放在

$（document）.ready（function（）{…}）；

像这样：

$(document).ready(function(){
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});

---

只要您使用jQuery，您就可以充分利用它提供的功能。toggle（）方法允许您显示/隐藏组件、动画以及提供给您的一切。下面是我编写的一个组件的摘录，该组件将您指定的任何div转换为带有标题栏的可折叠窗格：

  CollapsiblePane.prototype.toggle = function( img ){
    var self = this, icon = ( ( self.selector.css( "display" ) === "none" ) ? "collapse" : "expand" );
  self.selector
     .toggle( 'blind', {}, 200, function(  ) {
        $( img ).attr( "src", self.path + "img/" + icon + ".png");
      });
  };

---

如果您想查看完整的源代码，可以在此处查看：。要说明toggle（）的功能，还有很多事情要做，但如果您想了解如何使用jQuery扩展UI组件，请看一看。

您的相关功能（最小功能）在哪里HTML？谢谢，但是在你的问题标签下面有一个“”链接；单击该链接（或本评论中的链接），然后将你的HTML添加到你的问题中（可以阅读的地方，而不是难以辨认的评论）。抱歉，我现在编辑了最初的问题。那么问题是什么。代码按预期工作。例如：教程代码工作，但不是我的编码，问题已通过下面的HALL解决。感谢您的回答。就是这样，现在工作正常。感谢您的及时响应，印象深刻。是的，它是正确的，默认情况下JSFIDLE具有就绪功能w这里就像monkeyshrine中的一样，为什么我的代码没有其他答案中的颜色？我是这个网站的新手。这听起来很有趣，Robert，你有没有链接或小提琴可以让我看到它的作用？链接到gadget ui的工作示例，包括可折叠窗格对象：。如果你安装了Bower，你可以直接“Bower inst”“所有小工具ui”以签出源代码并在本地运行测试页面。

$(document).ready(function()
{
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});

$(document).ready(function(){
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});

  CollapsiblePane.prototype.toggle = function( img ){
    var self = this, icon = ( ( self.selector.css( "display" ) === "none" ) ? "collapse" : "expand" );
  self.selector
     .toggle( 'blind', {}, 200, function(  ) {
        $( img ).attr( "src", self.path + "img/" + icon + ".png");
      });
  };