[英]Change CSS display to JavaScript
I got this code on my page: 我在页面上获得了以下代码:
HTML: HTML:
<table class="position2" cellpadding="0" cellspacing="0" border="0">
<tbody><tr valign="top">
<td class="my-width"> <div class="region region-top1">
<div class="block block-menu" id="block-menu-menu-drugie-menu-testowe">
<div class="art-block clearfix">
<div class="art-blockheader"><h3 class="t subject">
Moje kursy</h3>
</div> <div class="art-blockcontent"><ul class="menu"><li class="first leaf"><a href="/?q=node" title="">Test</a></li>
<li class="last leaf"><a href="/?q=node" title="">test2</a></li>
</ul></div>
</div></div>
</div>
</td>
<td class="my-width"> <div class="region region-top2">
<div class="block block-menu" id="block-menu-menu-menu-testowe">
<div class="art-block clearfix">
<div class="art-blockheader"><h3 class="t subject">
Marketing</h3>
</div> <div class="art-blockcontent"><ul class="menu"><li class="first collapsed"><a href="/?q=node" title="">Link testowy</a></li>
<li class="last leaf"><a href="http://drupal.org" title="">Link2</a></li>
</ul></div>
</div></div>
</div>
</td>
<td class="my-width"> <div class="region region-top3">
<div class="block block-menu" id="block-menu-menu-menu-top3">
<div class="art-block clearfix">
<div class="art-blockheader"><h3 class="t subject">
BHP</h3>
</div> <div class="art-blockcontent"><ul class="menu"><li class="first last leaf"><a href="/?q=node" title="">Link testowy</a></li>
</ul></div>
</div></div>
</div>
</td>
<td class="my-width"> <div class="region region-top4">
<div class="block block-menu" id="block-menu-menu-menu-top4">
<div class="art-block clearfix">
<div class="art-blockheader"><h3 class="t subject">
Zarządzanie</h3>
</div> <div class="art-blockcontent"><ul class="menu"><li class="first last leaf"><a href="/?q=node" title="">Link testowy</a></li>
</ul></div>
</div></div>
</div>
</td>
<td class="my-width"> <div class="region region-top5">
<div class="block block-menu" id="block-menu-menu-menu-top5">
<div class="art-block clearfix">
<div class="art-blockheader"><h3 class="t subject">
E-learning</h3>
</div> <div class="art-blockcontent"><ul class="menu"><li class="first last leaf"><a href="/?q=node" title="">Link testowy</a></li>
</ul></div>
</div></div>
</div>
</td>
</tr>
</tbody></table>
And simple hide art-blockcontent div with css:hover 并使用css:hover进行简单的hide art-blockcontent div
.position2 .art-blockcontent {
display: none;
}
.position2:hover .art-blockcontent {
display: block;
}
And i need to convert it to javascript on click. 我需要点击将其转换为javascript。 On click show, next click hide. 在单击显示时,下一步单击隐藏。
I tried this: 我尝试了这个:
$(".position2").click(function () {
$(".art-blockcontent").toggle("slow");
});
But it doesn't work. 但这是行不通的。 Any suggestions? 有什么建议么?
First thing you have to do, TEST YOUR JQUERY WORK 您要做的第一件事,就是测试您的JQUERY工作
$(document).ready(function() {
alert('JQUERY!')
$('.position2').click(function () {
alert('YES!');
});
});
So click your .postion2
element, if its work so.... 因此,请点击.postion2
元素(如果可以的话)...
Use .hide() or .fadeOut() or toggleClass() (with your CSS) or .toggle() 使用.hide ()或.fadeOut()或toggleClass() (与CSS一起使用)或.toggle()
$('.position2').click(function () {
$('.art-blockcontent', this).hide();
});
or 要么
$('.position2').click(function () {
$('.art-blockcontent', this).fadeOut();
});
To show and hide, do like... 要显示和隐藏,喜欢...
$('.position2').click(function () {
$('.art-blockcontent', this).toggle('slow');
});
or 要么
$('.position2').toggle(function(){
$('.art-blockcontent', this).hide();
},function(){
$('.art-blockcontent', this).show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.