切换悬停/点击列表项目

我试图完成一些有几个不同的元素，其中每一个我可以单独工作，但是当我尝试将它们合并时，我什么也得不到。切换悬停/点击列表项目

目标： 1）悬停列表项文本时，切换/淡入描述div。
2）当在同一列表项的点击列表项的文字，“针”描述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，但它失败。有任何想法吗？我发现实现这个

来源

2011-04-19 f8xmulder

一种方式是与folllowing：

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

参考文献：

来源

2011-04-19 23:40:47

我没有得到＃4行为，我正在寻找你的例子。我刚刚检查了你的小提琴，它做了我原来的例子已经做了：http://jsfiddle.net/rfyxD/61/ – f8xmulder 2011-04-20 00:06:18

@ f8xmulder，对此感到抱歉;当我把第一个版本放在一起的时候，我有一点呃，不介意。我想我已经用更新后的演示来纠正它。如果你能看一看，看看它是否满足你的需求？ – 2011-04-20 22:02:19

是的，你的更新工作。谢谢你做的工作。你有没有看到我在下面发布的解决方案？我最终“摆弄”它，直到我得到它的工作，甚至设法添加一个未提及的功能。我很好奇哪个解决方案在尺寸方面提供了最好的回报... – f8xmulder 2011-04-21 06:00:32

，我终于得到这个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/

我增加了一个功能，这一点，这将保持一个点击项目持续，直到你将鼠标悬停在不同华里。

来源

2011-04-20 16:35:38 f8xmulder

切换悬停/点击列表项目

回答

相关问题