Question

我已将以下“Q＆amp; A”divs放在一起：

<div class="Questions">
<div class="bat"><div class="firstheader"><button>Question1</button></div><divclass="Question"><div id=Question > <div id="Answer"><div id="Answer1Output">   </div><div id="ShowAnswer1" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div></div></div>

<div class="cat"><div class="header"><button>Question2</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer2Output"></div><div id="ShowAnswer2" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div></div></div>

<div class="cat"><div class="header"><button>Question3</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer3Output"></div><div id="ShowAnswer3" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div></div>

请复杂的HTML，因为我还是新手。下面是加载这些div的函数（还包括“header”类的“slide”函数，以显示随后的“问题”类点击。请注意，第一个“bat”div显示，但第二个和第三个“猫”div是随机和隐藏的。

$(function() {
$("div.Questions").randomize("div.cat");
$(".header").hide();
});

$(function() {
$(".Question").hide();
$(".header").click(function()
{
$(this).next(".Question").slideToggle(500);
});

$(".firstheader").click(function()
{
$(this).next(".Question").slideToggle(500);
}); 

});

(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
  var $this = $(this);
  var elems = $this.children(childElem);
  elems.sort(function() { return (Math.round(Math.random())-0.8); }); 
  $this.remove(childElem); 
  for(var i=0; i < elems.length; i++)
    $this.append(elems[i]);     
});

} }）（jQuery的）;

这是一个点击功能，用于显示顶部“bat”div中的“Answer”输出。它还意味着在“bat”div的正下方显示隐藏的“cat”div的“标题”按钮：

$("#ShowAnswer1").click(function(){
$("#Answer1Output").show();
$(this).closest(".cat").next(".header").show();  
$("#ShowAnswer1").hide();         
})

ATM，此功能成功显示“bat”div应答输出，但无法在其正下方显示“cat”div的“标题”按钮。有人知道为什么不这样做吗？这很重要，因为需要“标题”按钮来显示随后的点击问题。我刚刚切换到jquery ui，但似乎无法找到任何内容来帮助这种“功能”。

预先感谢大家

在加载时随机化隐藏内容，在点击时显示隐藏内容

0 个答案: