Переключение при наведении / клик с элементами списка - PullRequest
Новая
       21

Переключение при наведении / клик с элементами списка

0 голосов
/ 20 апреля 2011

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

Цели: 1) при наведении курсора на текст элемента списка, переключение / исчезновение описания div.
2) при нажатии на текст элемента списка, «pin» описание div
3) при нажатии на тот же элемент списка, «открепить» описание div
4) при щелчке другого элемента списка «открепите» все, что уже закреплено, чтобы оно исчезло, и «закрепите» новый элемент, чтобы оно прилипло.

У меня есть список, настроенный так: 

 <ul>  
  <li><a href="http://foo.com">foo</a>  
  <div class="description">some text to be revealed</div>  
  </li>  
  <li><a href="http://foo.com">foo</a>  
  <div class="description">some text to be revealed</div>    
  </li>
 </ul>

А вот и вопрос, который у меня есть до сих пор: 

$(function() {  
//creates toggle fade effect
jQuery.fn.fadeToggle = function(speed, easing, callback) {   
  return this.animate({opacity: 'toggle'}, speed, easing, callback);   
};   
$(".thumblist li").hover(function() {  
  if(!$(this).data('pinned'))  
    $(this).children(".description").fadeToggle();  
});  
$(".thumblist li").click(function() {  
  $('.liselected').removeClass('liselected');  
  $(this).children('.description').addClass('liselected');  
  $(this).data('pinned', !$(this).data('pinned'));  
});  
});

У меня все работает, кроме последнего пункта. Я попытался удалить класс .liselected из всех элементов списка, а затем добавить его в текущий onclick, но это не удается. Есть идеи?

Ответы [ 2 ]

2 голосов
/ 20 апреля 2011

Я нашел способ достичь этого с помощью следующего: 

$('li').hover(
    function(){
        var fadeDiv = $(this).find('.description');
        if ($(fadeDiv).hasClass('pinned')){
            return false;
        }
        else {
            $(fadeDiv).fadeIn(500);
        }
    },
    function(){
        var fadeDiv = $(this).find('.description');
        if ($(fadeDiv).hasClass('pinned')){
            return false;
        }
        else {
            $(fadeDiv).fadeOut(500);
        }
    }).click(
    function(){
        $('.pinned').removeClass('pinned');
        $(this).find('.description').addClass('pinned');
    });

В сочетании с CSS: 

.description {
    display:none;
}
.description.pinned,
.pinned.description {
    display: block;
}

Демонстрация JS Fiddle .

Отредактировано с обновлением демоверсии JS Fiddle : 

$('li').hover(
    function(){
        var fadeDiv = $(this).find('.description');
        if ($(fadeDiv).hasClass('pinned')){
            return false;
        }
        else {
            $(fadeDiv).fadeIn(500);
        }
    },
    function(){
        var fadeDiv = $(this).find('.description');
        if ($(fadeDiv).hasClass('pinned')){
            return false;
        }
        else {
            $(fadeDiv).fadeOut(500);
        }
    }).click(
    function(){
        $(this)
            .closest('ul')
            .find('.pinned')
            .removeClass('pinned')
            .trigger('mouseleave');
        $(this)
            .find('.description')
            .addClass('pinned');
    });

Это дает поведение "# 4", проблема, с которой я сталкивался раньше, былачто я основал функцию на mouseleave (вторая функция метода hover()), а затем забыл вызвать ее при удалении имени класса из обработчика щелчка.Вздох ...

Ссылки:

1 голос
/ 20 апреля 2011

Я наконец-то заставил этот jQuery работать, как указано выше: 

$('.thumblist li').hover(function() {
  var fadeDiv = $(this).find('.description');

  if ($(fadeDiv).hasClass('pinned')){
      return false;
  } else {
    $(fadeDiv).fadeIn(500);
  }
}, function(){
  var fadeDiv = $(this).find('.description');
  if ($(fadeDiv).hasClass('pinned')){
    return false;
  } else {
    $(fadeDiv).fadeOut(500);
  }  
});

$('.thumblist li').click(function() {
  var fadeDiv = $(this).find('.description');
  $('.pinned').removeClass('pinned');
  $(fadeDiv).addClass('pinned');
  $('.thumblist li').children('.description').not('.pinned').delay(100).fadeOut(400);
}).hover(function() {
  $(this).siblings().find('.description').removeClass('pinned');
  $(this).siblings().find('.description').fadeOut(400); 
});

Вероятно, есть более простой / более элегантный способ сделать это, но я не большой гуру jQuery. Вот скрипка для этого: http://jsfiddle.net/rfyxD/119/

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

...