In my "FAQ" section, make <dt> look like an <a> with jquery
My stylesheet has two definitions:
bodytext a { border-bottom-color: #9aa1ae; border-bottom-width: 1px;
border-bottom-style: solid; color: #00589f; }
bodytext a:hover { border-bottom-color: #0d1117; border-bottom-width: 1px;
border-bottom-style: solid; color: #0d1117; }
and my page has an FAQ section, like so
<dl class='faq'>
<dt>Question 1</dt>
<dd>Answer 1</dd>
<dt>Question 2</dd>
<dd>Answer 1</dd>
</dl>
I wrote a simple jquery to expand/contract the FAQ, as follows:
$('dl.faq dd').hide();
$('dl.faq dt').click(function(){
$(this).next().slideToggle();
});
so that if javascript is off, the FAQ is still readable.
However, right now, I'm worried that my readers aren't clicking the questions to expand them. I'd like the dt
s to look like a
s so they look clickable, and prefe开发者_如何学Gorably have the a
and a:hover
definitions appear only once in my stylesheet. How do I do this in jquery?
Why don't you find where you define the a
and change like so in the CSS
a,
dl.faq dt {
color: blue;
cursor: pointer;
}
You could also put a unique id on every answer, and actually use a link to it, for example
<dl class='faq'>
<dt><a href="#question-1">Question 1</a></dt>
<dd id="question-1">Answer 1</dd>
<dt>Question 2</dd>
<dd>Answer 1</dd>
</dl>
That way, you could also link people to individual questions / answers. It will also jump their browser viewport to the answer when clicked.
I changed my stylesheet to this:
bodytext a, .a-like { border-bottom-color: #9aa1ae; border-bottom-width: 1px;
border-bottom-style: solid; color: #00589f; }
bodytext a:hover, .a-like:hover { border-bottom-color: #0d1117; border-bottom-width: 1px;
border-bottom-style: solid; color: #0d1117; }
Since dt
is a block-level tag and a
is an inline tag, I changed my HTML so it won't look insane:
<dl class='faq'>
<dt><span>Question 1</span></dt>
<dd>Answer 1</dd>
<dt><span>Question 2</span></dd>
<dd>Answer 1</dd>
</dl>
Finally, I changed my javascript to this
$('dl.faq dd').hide();
$('dl.faq dt span').addClass('a-like');
$('dl.faq dt').css("cursor", "pointer");
$('dl.faq dt').click(function(){
$(this).next().slideToggle();
$(this).children(":first").toggleClass('a-like');
});
Thus, when javascript is off, it looks like a Definition list. When javascript is on, it looks like an interactive FAQ. Thanks, Alex, for throwing some ideas.
精彩评论