JQuery переключает вопросы и ответы: отдельные вопросы и ответы не будут работать правильно, если вы сначала не нажмете "Открыть все / Закрыть все"
У меня есть список вопросов и ответов с "Открыть все / Закрыть все" вверху с отдельными кнопками открытия и закрытия изображения, которые переключаются при нажатии. Это отлично работает.
Затем следуйте индивидуальным вопросам и ответам, и у каждого есть свое открытое и закрытое изображение.
Если вы сначала нажмете "Открыть все / Закрыть все", как только страница загрузится, а затем нажмете на отдельные вопросы и ответы, откройте / закройте изображения, все работает нормально. Но если после загрузки страницы вы нажимаете на отдельные вопросы и ответы, открывают / закрывают изображения, минуя "Открыть все / Закрыть все", они отображают неподходящее открытое или закрытое изображение.
Вот код страницы:
<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div>
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div>
<div class="qa">
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div>
<div class="answer"><p>Answer.</p></div>
</div>
Вот скрипт (также использует Jquery):
$(function() {
$(".qa").click(function() {
$(this).find("div").next().slideToggle("fast");
if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") {
$(this).find("div:eq(0)").find("img").attr("src", "close.gif");
}
else {
$(this).find("div:eq(0)").find("img").attr("src", "open.gif");
}
});
$(".answersee").click(function() {
$(".answer").show("fast");
$(".qa > div > img").attr("src", "close.gif");
$(".answerhide").show();
$(".answersee").hide();
})
$(".answerhide").click(function() {
$(".answer").hide("fast");
$(".qa > div > img").attr("src", "open.gif");
$(".answersee").show();
$(".answerhide").hide();
})
});
Я не думаю, что это проблема CSS, или я бы включил этот код здесь. Нужно ли каким-то образом инициализировать скрипт? Или я ошибся в приведенном выше скрипте?
4 ответа
Вот как бы я это сделал.
РЕДАКТИРОВАТЬ:
Обновите код, чтобы иметь простую ссылку открытия / закрытия.
Код с комментариями, который объясняет мой подход:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
body
{
font-family: "Verdana";
font-size: 12px;
}
.question
{
background-color: #ccc;
cursor: pointer;
padding: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #000;
}
.answer {
padding: 5px;
}
</style>
<script>
$(document).ready(
function()
{
//Hide all the answers on page load.
$('.answer').hide();
//For all questions, add 'open'/'close' text.
//You can replace it with an image if you like.
//This way, you don't need to specify img tag in your HTML for each question.
$('.question')
.append(' <span>[ open ]</span>');
//Now there are two ways to toggle the visibility of answer.
//Either click on the question OR click on Open All / Close All link.
//To use the same code for both instances, we will create
//a function which will take the 'question' div and toggle the answer for it.
//Advantage of this approach is that the code to toggle the answer is in
//one place.
//By default, this function will try to toggle the status of the answer
//i.e. if it's visible, hide it otherwise show it.
//This function will take a second argument called 'showAnswer'.
//If this argument is passed, it overrides the toggle behavior.
//If 'showAnswer' is true, answer is shown.
//If it's false, answer is hidden.
//This second parameter will be used by the 'openAll', 'closeAll' links.
var toggleAnswer = function toggleAnswer(question, showAnswer)
{
//The way I have structured the HTML, answer DIV is right after
//question DIV.
var $answer = $(question).next('div');
//Animation callback, after the animation is done, we want to
//switch the 'text' to display what could the user do with the question.
//Once again, you can change this code to show open/close image.
var updateText = function()
{
var text = $answer.is(':visible') ? ' [close] ' : ' [open] ';
$(question).find('span').html(text);
}
var method = null;
if(arguments.length > 1)
{
//If the function was called with two arguments, use the second
//argument to decide whether to show or hide.
method = showAnswer === true ? 'show' : 'hide';
}
else
{
//Second argument was not passed, simply toggle the answer.
method = $answer.is(':visible') ? 'hide' : 'show';
}
$answer[method]('fast', updateText);
};
//On each question click, toggle the answer.
//If you have noticed, I didn't enclose both Q&A inside one DIV.
//The way you have done if user clicks on the answer, answer will collapse.
//This may not be desirable as user may want to copy the answer
//and he won't be able to.
$('.question').click(function(){ toggleAnswer(this);});
//We will reuse the same toggleAnswer method in openAll, closeAll
//handling. This way, if you want to change behavior of how the question/answers
//are toggled, you can do it in one place.
$('#openClose').click(
function()
{
var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
$('.question').each(function() { toggleAnswer(this, showAnswer); });
$(this).html(showAnswer ? 'Close All' : 'Open All');
return false;
}
);
}
);
</script>
<html>
<head>
<title>simple document</title>
</head>
<body>
<a id='openClose' href='#'>Open All</a>
<br /><br />
<div class='question'>Question 1</div>
<div class='answer'>Answer 1</div>
<div class='question'>Question 2</div>
<div class='answer'>Answer 2</div>
<div class='question'>Question 3</div>
<div class='answer'>Answer 3</div>
</body>
</html>
Redsquare and Solution Йоги:
Благодарю. Я отвечу позже и также опубликую рабочую демонстрацию, чтобы вы могли увидеть проблему более четко. Извините, я должен был сделать это раньше.
Лиз
Спасибо, что нашли время, чтобы предоставить это. Я попробую это позже сегодня и доложу. В моей версии я переключаю функцию "Открыть все / Закрыть все". Это выглядит чище и проще в использовании, так как вам не нужно двигать мышью.
Вам нужно использовать обратные вызовы, потому что ваша анимация не будет завершена к тому времени, чтобы проверить, какое изображение показывается.
$(".qa").click(function() {
$(this).find("div").next().slideToggle("fast", toggleImage);
}
function toggleImage(){
var $img = $(this).find("img");
$img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif");
}
NB. Есть более эффективные способы сделать это, но сначала давайте начнем работать, а затем посмотрим, не хотите ли вы еще немного изменить его.