jQuery: как я могу скрыть / показать небольшую кнопку для определенного столбца при наведении на столбец таблицы? - PullRequest
Новая
       14

jQuery: как я могу скрыть / показать небольшую кнопку для определенного столбца при наведении на столбец таблицы?

0 голосов
/ 08 ноября 2010

Мне нужно скрыть / показать (на самом деле slideDown/slideUp) кнопку «Добавить в корзину» под каждым столбцом таблицы.

Моя разметка - довольно простая таблица, и расположение кнопок также не вызывает никаких проблем, но я не могу понять, как прикрепить обработчик событий к событию 'hover' таблицы столбец эта кнопка покажет кнопку внутри этого столбца, а затем при наведении курсора на другой столбец скроет текущий показ и покажет следующий, находящийся в данный момент.

Я создал jsFiddle с полной настройкой, надеюсь, правильно иллюстрируя эту проблему.

http://jsfiddle.net/jannis/naz22/

Буду признателен, если вы поможете мне.

Ответы [ 2 ]

2 голосов
/ 08 ноября 2010

Если вы хотите сделать это, я бы предложил использовать плавающие, определенные шириной div.То, как вы делаете это сейчас, излишне сложно изолировать зависание над «колонкой».Если бы они были div, вы могли бы просто сказать $("div.column").hover(..), чтобы получить желаемый эффект. 

<div class="container">
    <div class="features">
         <ul>
             <li>Webmail</li>
             ...
         </ul>
    </div>
    <div class="product">
         <ul>
             <li><img src="" /></li>
             ...
             <li class="addit"><a href="#">Add It</a></li>
          </ul>
    </div>
    <div class="product">
         <ul>
             <li><img src="" /></li>
             ...
             <li class="addit"><a href="#">Add It</a></li>
          </ul>
    </div>
    <div class="product">
         <ul>
             <li><img src="" /></li>
             ...
             <li class="addit"><a href="#">Add It</a></li>
          </ul>
          ...
    </div>
</div>

Тогда какой-нибудь простой CSS 

.product .addit { display:none; }
.product:hover .addit { display:block; }

или 

.product:hover .addit { background: blue; }

или jQuery 

$(".product").hover(
    function() { $(this).find(".addit").slideDown(); }, 
    function() { $(this).find(".addit").slideUp(); }
);
0 голосов
/ 09 ноября 2010

если вы не хотите использовать div, попробуйте вместо этого js: 

var table = $('table.comparison'),

addBtns = table.find('.add-buttons a'); // the <a> is the button to be shown/hidden

table.data('col',''); // attribute to keep track of currently hovered column
var compare = "x";

$('td').hover(function() {
    var idx = $(this).index();
    var idx2 = "col-"+ idx;

    table.data('col', idx ); // set data-col to current column 

    if($(this).attr("class")!= compare){
       $('.add-buttons').find('a').slideUp('fast');  
       $('.add-buttons').find('.col-'+idx+' a').slideDown('fast');  
       compare = idx2;
    }  
});
$('table').hover(function() {},function(){
   $('.add-buttons').find('a').slideUp('fast');   
});
...