jQuery скрытый div / <a>onClick вопрос

Question

заранее прошу прощения за формулировку вопроса ...

У меня есть таблица, которая возвращается после вызова AJAX. В последнем <td> каждой строки есть скрытый div, который я подключил, чтобы показать на mouseOver, а затем снова скрыть на mouseOut ссылки <a>, которая видна в <td>. Что я пытаюсь сделать, так это то, что если кто-то действительно нажмет на ссылку, то поле останется на месте, пока пользователь снова не нажмет на div. Вот что у меня есть:

function showDiv() {
           $("#getTable > tbody > tr:gt(0)").each(function(index) {
               //grab last td of each row after header row
               var row = $(this);
               var td = row.find("td:last");
               var a = row.find("td:last > a");



               $(a).mouseover(function() {
                   //show div
                   var d = $(this).next();
                   d.show('slow');
               });

               $(a).mouseout(function() {
                   //show div
                   var d = $(this).next();
                   d.hide('normal');
               });

               $(a).click(function() {
                   var d = $(this).next();
                   d.show('slow');
                     d.click(function() {
                    $(this).hide('normal');
                    });
                  });

           });

       }

Я думаю, что я нахожусь в правильном направлении, однако нажатие на ссылку приводит к появлению страницы наверху, что, как я знаю, связано с возвращаемым значением false, которое нужно где-то добавить, но div не остается , Я думаю, что div может остаться, но функция mouseOut срабатывает, когда я отхожу от нажатия <a>.

Как всегда, я заранее благодарен блестящим членам stackoverflow за любую помощь!

Вот разметка строки таблицы на случай, если она вообще поможет:

  <tr><td>102.89</td><td>12/14/2009</td><td>GA00427424      </td><td>ACHCBLUE CROSS B</td><td>061000104</td><td><a href="#">View Matches</a><div class="hideMe" style="display: none;"><span>ELECBCBS 121509 1366, $103.0000</span><br><span>CPO 121709 1383, $103.0000</span><br><span>C121809MJM2 LB 9060, $103.0000</span><br><span>C122809MM10 LR 9110, $103.0000</span><br></div></td></tr>

Answer 1

Я думаю, что вам придется вернуть «false» из функции щелчка, чтобы предотвратить навигацию.

Answer 2

У вас должна быть глобальная переменная, которая указывает, следует ли показывать a или нет. onmouseout должен скрывать div, только если он не должен отображаться:

var show = Array();
function showDiv() {
  $("#getTable > tbody > tr:gt(0)").each(function(index) {

     show[index] = false;
     // your stuff

     $(a).mouseout(function() {
          //show div
          if(!show[index]) {
              var d = $(this).next();
              d.hide('normal');
          }
     });

     $(a).click(function() {
          var d = $(this).next();
          if(d.is(':visible')) {
             show[index] = false;
             d.hide('normal');
          }
          else { 
             show[index] = true;
             d.show('slow');
          }
          return false;             
    });

  });
}

Обратите внимание, что я также изменил функцию click таким образом, чтобы вы не каждый раз назначали новый обработчик кликов. return false; должен удерживать страницу от перехода наверх.