jquery für FAQ Seite

Ich habe nicht viel Erfahrung mit jquery so entschuldigen Sie meine Ignoranz. Ich versuche eine FAQ zu erstellen, in der die Antwort angezeigt wird, wenn auf die Frage geklickt wird. Hier ist ein Testcode. Offensichtlich mache ich die JQuery nicht richtig, weil es nicht funktioniert.jquery für FAQ Seite

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<title>Untitled Document</title> 
</head> 

<body> 
<script> 
$('li:not(".q")').hide(); 

$('li.q').click(
    function(){ 
     $('li:not(".q")').slideUp(); 
     $(this).toggleClass('open'); 
    }); 
</script> 

<ul> 
    <li class="q">Q1. Question 
    </li> 
    <li> A. Answer 
    </li> 
</ul>  

</body> 
</html>

Quelle

2016-06-24 Jonathan Grant

Sie benötigen Code am Ende der Seite oder wickeln Sie es in einem Dokument bereit Handler – j08691

$(document).ready(function(){ 
    $('.answer').hide(); 
    $('.question').on('click', function() {   
     $('.answer').toggle('show'); 
    }); 
});

Sie wollen so etwas wie dieses, wenn ich Sie richtig verstanden habe. https://jsfiddle.net/mprzmb7b/1/

Quelle

2016-06-24 16:33:48

Das Problem zu bewegen ist, dass diese dann auch alle Antwortklassen auf. Ich brauche nur die Antwort auf die angeklickte. –

Dann folgen Sie dem Code, der @Sheldon Griffin gepostet hat. Es wird dein Problem lösen. –

Mit jQuery nächsten() -Methode (http://api.jquery.com/next/) lässt Sie mit dem li arbeiten nach dem von Ihnen angeklickt.

Beachten Sie, dass ich show() anstelle von addClass ('open') verwendet habe, weil ich nicht weiß, was in Ihrer offenen Klasse ist - slideUp() wird display: none zu allen Antworten hinzufügen, also haben Sie um sicherzustellen, dass Ihre offene Klasse das überschreibt.

$(document).ready(function() { 
    $('li.q').on('click', function() { 
     $('li:not(".q")').slideUp(); 
     $(this).next().show(); 
    }); 
});

Ich würde auch empfehlen, eine CSS-Klasse zu verwenden, um Ihre Antworten bereits ausgeblendet zu haben, wenn die Seite geladen wird; Javascript kann dazu führen, dass alle sichtbar und dann schnell ausgeblendet werden.

li:not(.q) { display: none; }

Quelle

2016-06-24 17:49:12

jquery für FAQ Seite

Antwort

Verwandte Themen