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

参考文献：

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上。

使用列表项悬停/单击切换

2 个答案: