ホバーで切り替え/リスト項目でクリックする

Question

私は個々に仕事をすることができるいくつかの要素がありますが、それらを組み合わせようとすると何も得られません。

ゴール： 1）リストアイテムテキストのホバリング時に、トグル/フェードの記述div。既に固定されているどのような別のリスト項目、「固定を解除」をクリックする時、同じリストアイテムのクリック、「固定を解除」の説明DIV
4）時のリスト項目のテキスト、「ピン」の説明DIV
3）のクリック時
2）フェードアウトして、新しいアイテムをスティックするように「固定」します。

私はこのような設定のリストを持っている：

<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

一つの方法は、folllowingである：

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

JS Fiddle demo：CSSと相まって

$('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'); 
    }); 

。

---

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()メソッドの2番目の機能）、クリックハンドラでクラス名を削除するときにそれをトリガするのを忘れてしまいました。ため息...

参考文献：

• 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にマウスを置くまで、クリックされたアイテムを永続的に保つこれに別の機能を追加しました。