ここでの私の問題は主にjQueryです...
ただし、特定の相互作用が実行されたときにイベントを発生させたいと思っています...すべてのアイテムが同一である場合、「この」特定のアイテムに対してのみです。
まず、ホバー状態が起動しない理由がわかりません。コンソールログには、対話が存在することが示されていますが、div が表示されません。スパンにカーソルを合わせたときにのみ「show-me」divが表示され、divが消えるにはマウスオフが必要です。
また、ユーザーがオプションの「選択」をクリックすると、選択した現在のアイテム入力のみを非表示にします-すべてのオプションを非表示にするわけではありません。
.find() は子孫のみを見つけるため、範囲外の要素を選択する方法を見つけるのに苦労しています - 他の場所にマークアップして、場所に関係なく要素を選択できるようにしたいマークアップ内。
これは、潜在的に「いじる」ための実際の例のJSFIDDLEです;-)
すべての提案を歓迎します!
ここに私のjQueryがあります
//Show item on hover for current item hovered
var item = $('.item'),
itemShow = $('.show-me');
item.hover(function() {
$(this).nextAll('.show-me').show();
console.log("hovered");
}, function() {
$(this).nextAll('.show-me').hide();
});
//Click select to hide options
$('.item').find('input').on('click', function() {
$(this).nextAll('ul').hide();
console.log("select was clicked");
});