將CSS顯示更改為JavaScript

Question

我在頁面上獲得了以下代碼：

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進行簡單的hide art-blockcontent div

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

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

我需要點擊將其轉換為javascript。 在單擊顯示時，下一步單擊隱藏。

我嘗試了這個：

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

但這是行不通的。 有什么建議么？

Answer 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();
   });

Answer 2

您的代碼正在運行，請嘗試此演示 ，檢查是否已加載jquery，可能是您的問題：

$(document).ready(function(){

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