mootools_使用MooTools滑块的常见问题解答

mootools

I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you go the extra mile and use MooTools sliders.

我经常通过一个注重细节的网站来限定一个出色的网站，并使所有“小事情”看起来都花在了他们身上。 面对现实吧-常见问题解答就像它们一样无聊。 也就是说，直到您付出更多努力并使用MooTools滑块为止。

View Demo 观看演示

步骤1：XHTML (Step 1: The XHTML)

<div class="question" rel="a1-1">Question 1</div>
<div class="answer" id="a1-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nunc justo, lacinia eu, elementum nec, faucibus blandit, massa. Pellentesque nec leo in urna accumsan sodales. Proin nec ligula. Vivamus vestibulum vestibulum neque. Mauris pede. Vivamus ac tortor id mauris hendrerit tincidunt.</div>
<div class="question" rel="a1-2">Question 2</div>
<div class="answer" id="a1-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nunc justo, lacinia eu, elementum nec, faucibus blandit, massa. Pellentesque nec leo in urna accumsan sodales. Proin nec ligula. Vivamus vestibulum vestibulum neque. Mauris pede. Vivamus ac tortor id mauris hendrerit tincidunt.</div>
<div class="question" rel="a1-3">Question 3</div>
<div class="answer" id="a1-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nunc justo, lacinia eu, elementum nec, faucibus blandit, massa. Pellentesque nec leo in urna accumsan sodales. Proin nec ligula. Vivamus vestibulum vestibulum neque. Mauris pede. Vivamus ac tortor id mauris hendrerit tincidunt.</div>

Predictably, I add a question class to every question, and an answer class to every answer DIV. Note, however, the rel attribute. The question's rel attribute matches the answer's ID element.

可以预见的是，我为每个问题添加了一个问题类，并为每个答案DIV添加了一个回答类。 但是请注意rel属性。 问题的rel属性与答案的ID元素匹配。

步骤2：CSS (Step 2: The CSS)

h2						{ margin:0 0 8px 0; }
.answer				{ line-height:18px; padding:0 0 20px 30px; }
.question			{ font-weight:bold; cursor:pointer; line-height:25px; padding:4px 30px; background:url(https://davidwalsh.name/demo/help.gif) 2px 7px no-repeat; }
.question:hover	{ background-color:lightblue; }

Nothing special here. I used a pointer cursor for the question's container though.

这里没什么特别的。 我虽然使用了指针光标作为问题的容器。

步骤3：MooTools JavaScript (Step 3: The MooTools JavaScript)

//once the dom is ready
window.addEvent('domready', function() {
	//hide all answers
	$$('.answer').each(function(el) {
		el.set('display','none');
	});
	//for every question div
	$$('.question').each(function(el) {
		//create a slider
		var slyder = new Fx.Slide(el.get('rel')).hide();
		//click event
		el.addEvent('click', function(e) {
			//toggle!
			e = new Event(e); slyder.toggle(); e.stop();
		});
	});
	//"show" all answers
	$$('.answer').each(function(el) {
		el.set('display','block');
	});
});

Once the DOM is ready I hide all answer DIVs. Why didn't I just do this in the CSS? Because if Moo didn't load correctly or the user didn't have JavaScript enabled, I don't want the answers hidden on the page.

DOM准备就绪后，我将隐藏所有答案DIV。 为什么我不只是在CSS中这样做呢？ 因为如果Moo无法正确加载或用户未启用JavaScript，我就不想在页面上隐藏答案。

Now that the answers are hidden, I create a slider for each question. This is where it's important that the question's rel matches the answer's id. We then add a click event to the question to toggle (open or close) the answer DIV.

现在答案已隐藏，我为每个问题创建一个滑块。 在这里，问题的rel与答案的id匹配很重要。 然后，我们在问题中添加点击事件，以切换(打开或关闭)答案DIV。

Lastly, we "show" (in CSS) each answer DIV.

最后，我们在CSS中“显示”每个答案DIV。

View Demo 观看演示

翻译自: https://davidwalsh.name/flashy-faqs-mootools-sliders

mootools