0

我在我的页面上得到了这个代码：

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>

并使用 css:hover 简单地隐藏 art-blockcontent div

.position2 .art-blockcontent {
    display: none;
}

.position2:hover .art-blockcontent {
    display: block;
}

我需要在点击时将其转换为 javascript。单击显示，然后单击隐藏。

我试过这个：

$(".position2").click(function () {
$(".art-blockcontent").toggle("slow");
});

但它不起作用。有什么建议么？

4

2 回答 2

1

您必须做的第一件事，测试您的 JQUERY 工作

$(document).ready(function() {
    alert('JQUERY!')
    $('.position2').click(function () {
          alert('YES!');
    });
});

所以点击你的.postion2元素，如果它的工作如此......

使用.hide( )或.fadeOut()或toggleClass() （与您的 CSS）或.toggle()

   $('.position2').click(function () {
      $('.art-blockcontent', this).hide();
    });

或者

   $('.position2').click(function () {
      $('.art-blockcontent', this).fadeOut();
   });

要显示和隐藏，请喜欢...

   $('.position2').click(function () {
      $('.art-blockcontent', this).toggle('slow');
   });

或者

   $('.position2').toggle(function(){
     $('.art-blockcontent', this).hide();
   },function(){
     $('.art-blockcontent', this).show();
   });
于 2013-09-15T22:06:04.970 回答
0

您的代码正在运行，试试这个演示，检查是否加载了 jquery，可能这是您的问题：

$(document).ready(function(){

    $(".position2").click(function () {
    $('.art-blockcontent').toggle();
   });
});
于 2013-09-15T22:14:13.260 回答