这是我的情况:
我有一个网站,涵盖4个不同的科目。我从4个div开始,每个div都有这些主题的标题。例如,
<div><p> Physics </p></div>
<div><p> Chemistry </p></div>
<div><p> Biology </p></div>
<div><p> Math </p></div>
当我点击'物理'div时,我想要另外一个div来解释一些物理问题或其他东西。再次点击会使'elaboration div'消失。我在这里有一个“主题”:
这是我用来完成此任务的jQuery代码。
$(document).ready(function () {
$(".phys").click(function () {
if ($(".phys:last").css("visibility") == "visible") {
$(".phys").css("visibility", "");
} else {
$(".phys").css("visibility", "visible");
}
});
});`
我可以写4个不同的时间,对于我正在使用的每个主题一次,但想要一个更清洁的解决方案。我想知道我是否可以通过以下方式声明所有div:
<div class="subject phys"><p> Physics </p></div>
<div class="subject chem"><p> Chemistry </p></div>
<div class="subject bio"><p> Biology </p></div>
<div class="subject math"><p> Math </p></div>
然后每当单击“subject”div时运行某个click()函数,让代码识别此特定div所指的主题,并显示相应的“elaboration div”。
我相信我可以通过子类化来实现这一点:
/* CSS */
div.subject{}
.subject.phys{}
.subject.chem{}
.subject.bio{}
.subject.math{}
有什么想法?是否有一种明显更好的方法来实现这样的东西?
修改
这是一个更新的小提琴,HTML大致与实现中的一样:
答案 0 :(得分:0)
$('.subject').click(function(e){
e.stopPropagation();
e.preventDefault();
//use a specific class name like `insideDiv` for the divs that are inside your main ones instead of div.another below
if ($(this).find('div.another').is(":visible"))
{$(this).find('div.another').hide();}
else
{$(this).find('div.another').show();}
});