我正在寻找一个纯粹的CSS答案来隐藏和显示内容但是没有运气后我一直在玩一段javascript代码。我的问题在代码下方,因为它可能会帮助您首先查看代码。
<script type="text/javascript">
$(document).ready(function(){
$('.text_container').addClass("visible");
$('.text_container').click(function() {
var $this = $(this);
if ($this.hasClass("visible")) {
$(this).removeClass("visible").addClass("hidden");
} else {
$(this).removeClass("hidden").addClass("visible");
}
});
});
</script>
<div id="services" class="text_container">
<h4>SERVICES</h4>
<div>
<p>Loads of text blah blah blah</p>
</div>
</div>
/* HIDE and SHOW content javascript function */
.hidden div {display:none;}
.visible div {display:block;}
.text_container {
background-color: #39b54a;
background-image: url("pattern2.png");
border: 1px solid #777777;
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
color: #000000;
padding: 5px;
text-align: left;
width: auto;
}
.text_container h4 {
cursor: pointer;
}
.text_container div p {
margin-bottom: 10px;
}
.visible > div {
display: block;
font-size: 17px;
height: 100%;
}
#rating > div {
clear: left;
height: 260px;
}
/* end of HIDE and SHOW content javascript function */
目前正如预期的那样,具有class = text_container区域的div是可点击的,因此如果在您选择内容隐藏的表单时将表单放在子DIV中。我想只制作H4元素 可点击以便点击显示的内容不会隐藏内容。
我在javascript上没用,我想这需要重新调整js。 感谢
答案 0 :(得分:1)
您可以使用:
$('.text_container h4').click(function() {
if($(this).hasClass("visible")) {
$(this).removeClass("visible").addClass("hidden");
} else {
$(this).removeClass("hidden").addClass("visible");
}
});
$(''')中的内容就像一个CSS选择器,所以如果你知道CSS那么它对你来说不会有问题。
使用CSS,您可以使用:
设置h4元素的样式.text_container h4 { color: #000000; }
同样,您可以使用jQuery创建一个包装集,并使用:
选择它$('.text_container h4')
答案 1 :(得分:1)
这将实现您的目标,example:
$(document).ready(function() {
$('.text_container h4').addClass("visible");
$('.text_container h4').click(function() {
var $this = $(this).parent();
if ($this.hasClass("visible")) {
$this.removeClass("visible").addClass("hidden");
} else {
$this.removeClass("hidden").addClass("visible");
}
});
});
我们正在选择H4并向其添加click事件,然后使用.parent()访问父DIV。
答案 2 :(得分:0)
将$('.text_container')...
替换为$('.text_container h4')...
,或者更好的是$('h4')....
,如果它是页面上唯一的H4元素。
答案 3 :(得分:0)
改变这个:
$('.text_container').click(function() {
到此:
$('.text_container h4').click(function() {
答案 4 :(得分:0)
只需替换为
$('.text_container h4').click( ...
答案 5 :(得分:-1)
我不确定某人是否可以点击display: none
的元素。另外,替换这个:
if ($this.hasClass("visible")) {
$(this).removeClass("visible").addClass("hidden");
} else {
$(this).removeClass("hidden").addClass("visible");
}
有了这个:
$(this).toggle();
完整代码:
$(function() {
$('.text_container h4').click(function() {
$(this).parent().toggle(); // toggles between visible and hidden
});
});