切換懸停/點擊列表項目

我試圖完成一些有幾個不同的元素，其中每一個我可以單獨工作，但是當我嘗試將它們合併時，我什麼也得不到。切換懸停/點擊列表項目

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

切換懸停/點擊列表項目

回答

相關問題