JQuery的切换Q&A:除非你点击打开所有/个人Q&由于不正确操作全部关闭第一

我有一个问答在与点击切换当个别打开和关闭图像按钮上方的清单“打开所有/全部关闭”。 这工作正常。

然后按照个人的Q&为,每个人都有自己打开和关闭图像。

如果“关闭所有打开的所有/”第一,尽快点击的页面加载,然后点击每个Q&A打开/关闭图像,一切工作正常。 但是,如果页面加载后,点击个人Q&A打开/关闭图像,绕过“打开所有/全部关闭,”他们显示了不恰当的打开或关闭图像。

这里是页面代码:

<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的问题​​,或者我会在这里包含的代码。 我是否需要初始化以某种方式脚本? 还是我做了上面的脚本错了吗?

--------------解决方案-------------

下面是我会怎么做它。

工作演示→

编辑:

更新代码,有简单的打开/关闭链接。

有评论该准则解释我的方法:

<!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
//ie 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>

您需要使用的回调,因为你的动画将没有完成的时候,检查图像被显示为它。

$(".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");

}

注:有更好的方法可以做到这一点,但可以让你的工作,然后再看看,如果你想重构它更多一些。

感谢您抽出宝贵时间来提供这一点。 我会尝试这在今天晚些时候和汇报。 在我的版本,我切换打开所有/关闭所有功能。 这是一个整洁的外观和更容易使用,因为你不必移动鼠标。

Redsquare和解决方案瑜珈:

谢谢。 我会稍后再回复,并发布一个工作演示,所以你可以更清楚地看到这个问题。 对不起,我应该没有做过。

利兹

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 3.192 (s). 10 q(s)