所以我做了一个显示/隐藏脚本，打开并关闭被点击的元素。 但现在我无法以某种方式让它工作，我无法理解为什么。
有人可以尝试一下吗？
<div id="fleresvar" class="fleresvar"> <u><b>Klik her for at se flere svar</b></u>
<div id="txtmore" class="txtmore" style="display:none;">
<div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
<div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
<div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
<div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
<div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
</div
$("#fleresvar").click(function () {
var $element = $(this);
if ($(this).hasClass('open')) {
$element.removeClass("open");
$element.children(".txtmore").hide(500);
} else {
$(".open").removeClass("open");
$('.txtmore').hide(500);
$element.toggleClass('open');
$element.children('.txtmore').toggle(500);
}
});
答案 0 :(得分：2)
选中此FIDDLE
$(document).ready(function(){
$(".fleresvar").on('click','.handler',function () {
var $element = $(this).closest('.fleresvar');
if ($element.hasClass('open'))
{
$element.removeClass("open");
$element.find(".txtmore").hide(500);
}
else
{
$(".open").removeClass("open");
$('.txtmore').hide(500);
$element.addClass('open');
$element.find('.txtmore').show(500);
}
});
});
HTML
<div id="fleresvar" class="fleresvar">
<div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
<div id="txtmore" class="txtmore" style="display:none;">
<div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
<div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
<div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
<div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
<div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
</div>
</div>
<div id="fleresvar2" class="fleresvar">
<div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
<div id="txtmore" class="txtmore" style="display:none;">
<div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
<div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
<div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
<div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
<div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
</div>
</div>
答案 1 :(得分：0)
显示/隐藏脚本
var toggle = 0;
$("#fleresvar").click(function (e) {
if (toggle == 0) {
$('.txtmore').stop(true,true).show('500');
toggle = 1;
} else if (toggle == 1) {
$('.txtmore').stop(true,true).hide('500');
toggle = 0;
}
e.stopPropagation();
return false;
});
和示例
答案 2 :(得分：0)
$("#fleresvar").click(function () {
var $element = $(this);
if ($(this).hasClass('open')) {
$element.removeClass("open");
$element.children(".txtmore").hide(500);
} else {
$(".open").removeClass("open");
$element.toggleClass('open');
$element.children('.txtmore').show(500);
$('.txtmore').show(500);
}
});
答案 3 :(得分：0)
看起来您的代码确实有效，但txtask * div中没有内容，因此没有显示任何内容。如果您在其中添加内容，您将看到切换操作。但是，我有一些建议：
HTML4中不推荐使用<u>和<b>标记，然后将其带回HTML5以用于语义含义。换句话说，只有在添加含义时才会使用这些标记（例如，如果您在拼写错误的单词下划线）。您应该使用CSS text-decoration: underline;和font-weight: bold;来实现相同的效果。有关详细信息，请参阅此处：http://html5doctor.com/u-element/
此行：$element.children(".txtmore").hide(500);可简化为：$('#txtmore').hide(500);
这样做有两件事：您不必再使用子功能，因此处理较少。此外，在jQuery中按ID进行选择比按类选择更快 。它不会对5个元素产生影响，但是当你进入更复杂的项目时它会有所不同。如果您需要的元素是唯一的（即整个页面上只有一个元素），那么请使用ID。
看起来你想在主#fleresvar div上切换.open类;如果这是唯一的地方，那么这两行是冲突的：
$(".open").removeClass("open");
$element.toggleClass('open');
第一行将从.open的所有元素中删除.open，然后第二行将.open添加到#fleresvar。
如果您只想在主要元素中添加/删除它，请执行$element.addClass('open')和$element.removeClass('open')，或$element.toggleClass('open')两次。我个人喜欢使用addClass和removeClass，所以我确定已经添加/删除了这个类。
对于txtask * divs：不是在每个样式上添加相同的内联样式，而是为它们添加一个公共类，然后将样式移动到CSS文件中。
以下是我推荐的更改的jsFiddle：http://jsfiddle.net/2Saph/9/
HTML：
<div id="fleresvar" class="fleresvar">Klik her for at se flere svar
<div id="txtmore" class="txtmore">
<div id="txtask1" class='txtask'>a</div>
<div id="txtask2" class='txtask'>b</div>
<div id="txtask3" class='txtask'>c</div>
<div id="txtask4" class='txtask'>d</div>
<div id="txtask5" class='txtask'>e</div>
</div>
</div>
JS：
$("#fleresvar").on('click', function (evt) {
evt.preventDefault();
var $element = $(this);
if ($element.hasClass('open')) {
$element.removeClass("open");
$('#txtmore').hide(500);
} else {
$element.addClass("open");
$('#txtmore').show(500);
}
});
CSS：
#fleresvar {
cursor:pointer;
background-position: 0 4px;
min-height: 15px;
border: 0 solid #000000;
margin: 2px 0 5px 0;
padding: 0 0 0 15px;
background-image:url('/images/images/Pil_normal.png');
background-repeat: no-repeat;
font-weight: bold;
text-decoration: underline;
}
#fleresvar.open {
background-image: url('/images/images/Pil_open.png');
}
#txtmore {
display: none;
width: 280px;
min-height:15px;
border: 0 solid #000000;
margin: 0;
}
div.txtask {
text-decoration:underline;
color:#8F8F8F;
cursor:pointer;
}