javascript 单击展开 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27143688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand div on click
提问by yesmaybe
I searched these forums for a way to implement 'jquery expand div on click'
我在这些论坛上搜索了一种实现“jquery expand div on click”的方法
I found a simple and ideal tutorial but couldn't implement it when reinacting the code.
我找到了一个简单而理想的教程，但在重新执行代码时无法实现。
Is this code still valid with current jquery? I believe I have replicated the demo exactly, just not sure about the link to the script.
这段代码对当前的 jquery 仍然有效吗？我相信我已经完全复制了演示，只是不确定脚本的链接。
Here is the tutorial I am working from [link: https://stackoverflow.com/a/20144029/1471333]
这是我正在使用的教程 [链接：https: //stackoverflow.com/a/20144029/1471333]
[DEMO][2]
$('.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');
});
[link [2]: http://jsfiddle.net/mWcmg/1/]
and here is my result at [link removed], where the demo resource file works, but my coding doesn't open, for whatever reason. Perhaps the jquery I link to has changed?
这是我在 [链接已删除] 处的结果，演示资源文件在此有效，但无论出于何种原因，我的编码都无法打开。也许我链接到的 jquery 已经改变了？
EDIThere is a snippet of the HTML code.
编辑这里是 HTML 代码的片段。
<div class="wrapper">
<div class="small">
<p>Lorem..</p>
</div>
<a href="#">Click...</a>
</div>
Andy
安迪
回答by haul
Put your javascript inside the document ready event. Because in your example, you execute the javascript before the DOM is ready.
将您的 javascript 放在文档就绪事件中。因为在您的示例中，您在 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');
});
});
回答by Kimmedy
Your code is correct so you could have forgotten to make the document ready (onDomready).
您的代码是正确的，因此您可能忘记准备好文档 (onDomready)。
You can do that to put your code between $(document).ready(function(){...});
你可以这样做把你的代码放在 $(document).ready(function(){...});
Like so:
像这样：
$(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');
});
});
回答by Robert Munn
As long as you are using jQuery you might as well take advantage of the features it offers. The toggle() method allows you to show/hide a component, with animations and everything that gives you. Here is an excerpt from a component I wrote that turns any div you specify into a collapsible pane with a title bar:
只要您使用 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");
});
};
If you want to see the full source, you can see it here: https://github.com/robertdmunn/gadget-ui. There is a lot more going on than you need to see to illustrate what toggle() does, but if you want to get a sense of what you can do with jQuery to extend your UI components, take a look.
如果您想查看完整源代码，可以在此处查看：https: //github.com/robertdmunn/gadget-ui。要说明 toggle() 的作用，需要做的事情比您需要了解的多得多，但是如果您想了解使用 jQuery 可以做什么来扩展您的 UI 组件，请看一看。
回答by kapantzak
Try this: jsFiddle
试试这个：jsFiddle
HTML
HTML
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a id="click" href="#">Click...</a>
</div>
CSS
CSS
.small {
height: 30px;
overflow: hidden;
}
.big {
height: auto;
}
jQuery
jQuery
$('#click').click(function() {
$('div.wrapper').find('div').toggleClass('small big');
});
