jQuery Sliders花式常见问题解答

梦里梦外; 2023-02-21 14:29 47阅读 0赞

![jQuery][]

Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create [fancy FAQs with MooTools][] \-- here's how to create the same effect using jQuery.

常见问题可能很无聊，对吧？ 他们不必是！ 我已经向您展示了如何[使用MooTools][fancy FAQs with MooTools]创建[精美的常见问题解答][fancy FAQs with MooTools] \-这是使用jQuery创建相同效果的方法。

[View Demo][] [查看演示][View Demo] [View Elegant Demo][] [查看优雅演示][View Elegant Demo]

## HTML **(**The HTML**)** ##

<h3>This is question 1?</h3>
    <div>
    	<p>This is the answer to question #1.  Pellentesque habitant morbi....</p>
    </div>
    <h3>This is question 2?</h3>
    <div>
    	<p>This is the answer to question #2.  Pellentesque habitant morbi....</p>
    </div>

Simply a series of H3s and DIVs wrapper in one container DIV. Simple, simple, simple.

只需在一个容器DIV中放置一系列H3和DIV包装器即可。 简单，简单，简单。

## CSS **(**The CSS**)** ##

#faqs { position:relative; }
    #faqs h3	{ cursor:pointer; }
    #faqs h3.active	{ color:#d74646; }
    #faqs div   { position:relative; }
    #faqs div p	{ padding:0; margin-bottom:15px; }

Nothing out of the ordinary above -- format the elements as though there wont be a jQuery component.

上面没有什么特别的-格式化元素就好像没有jQuery组件一样。

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

$(document).ready(function() {
    	$('#faqs h3').each(function() {
    		var tis = $(this), state = false, answer = tis.next('div').slideUp();
    		tis.click(function() {
    			state = !state;
    			answer.slideToggle(state);
    			tis.toggleClass('active',state);
    		});
    	});
    });

Start by collecting and recursing through all of the H3 elements. Grab the DIV that follows, slide it in, and add click handlers to slide them in and out!

从收集和递归所有H3元素开始。 抓住随后的DIV，将其滑入，然后添加单击处理程序以将其滑入和滑出！

## 更优雅的效果 **(**A More Elegant Effect**)** ##

The above method is the more accessible version. If effects are you priority, the following CSS and jQuery JavaScript variants will make for a more elegant effect by preventing the initial slide in:

上面的方法是更易于访问的版本。 如果您优先考虑效果，则以下CSS和jQuery JavaScript变体将通过防止出现以下初始幻灯片来使效果更优雅：

#faqs h3	{ cursor:pointer; }
    #faqs h3.active	{ color:#d74646; }
    #faqs div { height:0; overflow:hidden; position:relative; }
    #faqs div p	{ padding:0; margin-bottom:15px; }

$(document).ready(function() {
    	$('#faqs h3').each(function() {
    		var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
    		tis.click(function() {
    			state = !state;
    			answer.slideToggle(state);
    			tis.toggleClass('active',state);
    		});
    	});
    });

[View Demo][] [查看演示][View Demo] [View Elegant Demo][] [查看优雅演示][View Elegant Demo]

There you have it. Have fun with your FAQs!

你有它。 玩转您的常见问题！

> 翻译自: [https://davidwalsh.name/jquery-sliders][https_davidwalsh.name_jquery-sliders]

[jQuery]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9qcXVlcnktbG9nby5qcGc?x-oss-process=image/format,png
[fancy FAQs with MooTools]: https://davidwalsh.name/fancy-faqs
[View Demo]: https://davidwalsh.name/demo/fancy-faqs-jquery.php
[View Elegant Demo]: https://davidwalsh.name/demo/fancy-faqs-jquery.php?version=effect
[https_davidwalsh.name_jquery-sliders]: https://davidwalsh.name/jquery-sliders