通过悬停切换/单击列表项

Question

我正在尝试完成包含几个不同元素的事情，每个元素我都可以单独工作，但是当我尝试将它们结合起来时，我什么也得不到。

目标： 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>

这是我目前拥有的 jquery：

$(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 中，但它失败了。有什么想法吗？

Answer 1

我发现实现此目的的一种方法是：

$('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 demo.

---

编辑更新了JS Fiddle demo：

$('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() 方法的第二个函数），然后忘记触发它在单击处理程序中删除类名时。叹息……

参考资料：

• hover()。
• hasClass()。
• fadeIn()。
• fadeOut()。
• click()。
• removeClass()。
• find()。
• trigger()。

Answer 2

我终于让这个 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/

我为此添加了另一个功能，它将保持点击的项目持续存在，直到您将鼠标悬停在不同的 li 上。