Dans mon "FAQ" section, faire <dt> ressembler à un <a> avec jquery

Mon stylesheet a deux définitions:Dans mon "FAQ" section, faire <dt> ressembler à un <a> avec jquery

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; }

et ma page a une section FAQ, comme si

<dl class='faq'> 
    <dt>Question 1</dt> 
    <dd>Answer 1</dd> 
    <dt>Question 2</dd> 
    <dd>Answer 1</dd> 
</dl>

j'ai écrit simple jquery pour étendre/contracter la FAQ, comme suit:

$('dl.faq dd').hide(); 
$('dl.faq dt').click(function(){ 
    $(this).next().slideToggle(); 
});

de sorte que si javascript est désactivé, le La FAQ est toujours lisible.

Cependant, en ce moment, je suis inquiet que mes lecteurs ne cliquent pas sur les questions pour les développer. Je voudrais que les dt s ressemblent à a pour qu'ils aient l'air cliquables, et de préférence, les définitions a et a:hover apparaissent une seule fois dans ma feuille de style. Comment est-ce que je fais ceci dans jquery?

Source

2010-07-26 Anna

Pourquoi ne trouvez-vous pas où vous définissez le a et changer comme si dans le CSS

a, 
dl.faq dt { 
    color: blue; 
    cursor: pointer; 
}

Vous pouvez aussi mettre un identifiant unique sur chaque réponse, et en fait utiliser un lien vers, par exemple

<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>

De cette façon, vous pouvez également associer des personnes à des questions/réponses individuelles. Il va également sauter la fenêtre de leur navigateur à la réponse lorsque vous cliquez dessus.

Source

2010-07-26 03:06:12 alex

parce que je ne veux pas que la page monte et descende quand un utilisateur javascript-élargit ou contracte les questions. Je peux et relier les gens à des questions/réponses individuelles en donnant à chaque 'dt' un identifiant. Je voudrais simplement que mes 'dt' ressemblent à' 'a's, ne se comportent pas comme eux, et seulement pour les lecteurs compatibles javascript. Merci. – Anna

@Anna Ajoutez simplement un événement pour JavaScript à ces liens et utilisez 'preventDefault()' ou 'return false'. Cela arrêtera le comportement habituel du navigateur. – alex

Alex, j'aimerais vraiment coder les questions en tant que 'dt's, pas en tant que 'a's. S'ils étaient 'a's, alors la page sauterait toujours de haut en bas avec des lecteurs désactivés par javascript. Inutile, je devrais ajouter. Merci. – Anna

je changé ma feuille de style à ceci:

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; }

Depuis dt est une balise de niveau bloc et a est une étiquette en ligne, j'ai changé mon code HTML de sorte qu'il ne regardera pas fou:

<dl class='faq'> 
    <dt><span>Question 1</span></dt> 
    <dd>Answer 1</dd> 
    <dt><span>Question 2</span></dd> 
    <dd>Answer 1</dd> 
</dl>

Enfin, j'ai changé javascript pour cette

$('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'); 
});

Ainsi, lorsque java le script est désactivé, il ressemble à une liste de définition. Lorsque javascript est activé, cela ressemble à une FAQ interactive. Merci, Alex, d'avoir lancé quelques idées.

Source

2010-07-26 04:03:19 Anna

Dans mon "FAQ" section, faire <dt> ressembler à un <a> avec jquery

Répondre

Questions connexes