Привязать <td>, но не содержать привязки, используя jQuery - PullRequest
Новая
       18

Привязать <td>, но не содержать привязки, используя jQuery

0 голосов
/ 06 октября 2011

Обновление: ссылки теперь работают, но стрелки все еще проблематичны.

Я работаю над http://www.boulderdispensaries.com/

Под картой, если щелкнуть строку, появится строка под ней. Даже если вы нажмете на ссылку в ряд. Кроме того, если щелкнуть строку, а затем щелкнуть строку выше, стрелка вправо не поворачивается вниз. Как я могу это исправить, чтобы щелкнув ссылку в строке, можно перейти по ссылке, чтобы стрелки работали правильно?

Для скрипачей: http://jsfiddle.net/yFkNf/

Я также вставил код ниже.

JQuery: 

$(document).ready(function() {

  var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">';
  var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">';
  var is_visible = false;

  $('tr:odd td').addClass('expand');
    // this is the hack I was using to get the links to work, but then the bind doesn't
//  $('tr:odd td:nth-child(1)').removeClass('expand');
//  $('tr:odd td:nth-child(2)').removeClass('expand');
//  $('tr:odd td:nth-child(4)').removeClass('expand');
  $('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">'+showText+'</a> &nbsp;');

  $('.toggle').hide();

  $('a.toggleLink').click(function() {
      is_visible = !is_visible;
      $(this).html( (!is_visible) ? showText : hideText);
      $(this).parent().parent().next('tr').toggle();
      return false;
  });

  $('.expand').click(function(){
      is_visible = !is_visible;
      $(this).parent().find('a.toggleLink').html( (!is_visible) ? showText : hideText);
      $(this).parent().next('tr').toggle();
      return false;
  });

});

Вот формат каждых двух строк: 

<tr>
  <td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td>
  <td><a href="http://maps.google.com/etc">2031 16th</a></td>
  <td>(720) 235-4232</td>
  <td><a href="mailto:info@boulderkindcare.com"><img src="email_icon.gif" /></a></td>
  <td nowrap="nowrap">&nbsp;</td>
  <td align="center">&nbsp;</td>
  <td align="center">&nbsp;</td>
  <td align="center">&nbsp;</td>
</tr>
<tr class="toggle">
  <td colspan="8">More info coming soon.</td>
</tr>

Ответы [ 2 ]

1 голос
/ 06 октября 2011

Извините за ответ без кода:

Чтобы ссылки работали правильно, я считаю, что вам просто нужно удалить return false из вашего обработчика кликов. Я думаю, что эта строка явно говорит ссылки не работать.

Ваша проблема со стрелками заключается в том, что ваша переменная состояния is_visible является глобальной (чего следует избегать, кстати), поэтому каждая строка имеет одну и ту же переменную. Было бы лучше сохранить это состояние в классе на tr, а затем проверить его на клике. Или, может быть, еще лучше иметь другой обработчик для «видимых» строк на основе этого класса.

1 голос
/ 06 октября 2011 
$('td a').click(function(event){
    event.stopPropagation();
});

Это предотвратит пузыри ссылок якоря внутри ТД до ТД. Возможно, вы захотите сделать селектор немного менее обобщенным; Вы не дали мне достаточно информации, чтобы конкретно нацелить ее.

Стрелы

Вы используете глобальную переменную для хранения информации о том, развернут ли элемент или нет, но одновременно можно развернуть несколько элементов. По сути, вам нужно сохранить эту деталь в переключаемой ссылке или найти другой способ в этом контексте узнать состояние раскрываемой строки.

...