僅將輸入附加到當前hoverd li

我試圖在ul上顯示當前懸停的輸入字段。此代碼樣的作品：僅將輸入附加到當前hoverd li

$('ul').hover(function(){ 
    $(this).append('<div style="display: block;"><input type="text"> <button>Knapp></button></div>'); 
}, 
function() { 
     $(this).find("input:last").fadeOut('fast'); 
     $(this).find("button:last").fadeOut('fast'); 
    } 

);

但它顯示了所有家長的輸入域，以及：/

我試圖從父母刪除的div找到

 $(this).parents().find("input:last").fadeOut('fast');

但當然，代碼也可以找到當前盤旋內的那個...

enter image description here

來源

2012-10-14 Alisso

我認爲這是傳播的問題。 UL是嵌套在一起的，因此在UL中懸停在UL上也會導致這種情況發生。你應該嘗試像$（'ul> li> ul'）那樣做直接後代選擇，或者給它一個唯一的clas'$（'ul.inner'）'，或者你可以試試'$（'ul '）.hover（function（e）{e.stopPropagation（）''但我仍然認爲最初的問題會發生。 – Ohgodwhy

@Ohgodwhy yo sup man！將它設置爲答案好主意will + you！'：'' –

@Tats_innit啊我的好人Tats，你好蕾。我認爲我不會讓它成爲答案，除非OP發現我的想法有幫助。我喜歡保持答案清潔，只有當我確定我的答案是解決方案。對於我所喜歡的場景來說，這太模糊了。 – Ohgodwhy

你追加到UL所以它會在所有的工作UL所以儘量specyfy上要附加

UL和更簡單的方法是添加id或class到UL

$('#one').hover(function(){ 
    $(this).append('<div style="display: block;"><input type="text"> <button>Knapp></button></div>'); 
}, 
function() { 
     $(this).find("input:last").fadeOut('fast'); 
     $(this).find("button:last").fadeOut('fast'); 
    } 

);

來源

2012-10-14 06:37:16

@Tats_innit是的，我是 –

我希望這可以適用於所有不同的uls，而不只是一個具有特定id的。 – Alisso

然後你可以使用你想要工作的類 –

這不會發生，因爲

的的ul的兒童是ul所以input將追加到它們

部分

您可以使用條件

像hasClass或類似ul>li

來源

2012-10-14 06:43:36 StaticVariable

我明白，這是因爲我徘徊父母以及我只是不知道如何只爲例如添加一個類到我正在視覺的一個徘徊。 – Alisso

@Alisso你可以使用'span'標籤 – StaticVariable

感謝您輸入我有所改變我的做法，現在，它工作得很好。

我在ul的末尾添加了一個輸入字段。隱藏它與CSS 讓這個只有擁有一流的主動（刪除類從父母&兒童）和只顯示div的是UL的直接兒童類活動的:)

$('ul').hover(function(){ 
     $(this).addClass('active'); 
     $(this).parents().removeClass('active'); 
     $(this).children().removeClass('active'); 
    }, function(){ 
     $(this).removeClass('active'); 
    });

HTML目前徘徊

<ul class="tasks tasks-20"> 
<div><input type="text"> <button>Add main task</button></div></ul> 
</li> 
<div><input type="text"> <button>Add goal</button></div></ul><ul class="goals"><h2>The public</h2> 

<li><span>: :</span>Follow our journey 
<ul class="tasks tasks-24"> 
<div><input type="text"> <button>Add main task</button></div></ul> 
</li> 
<div><input type="text"> <button>Add goal</button></div></ul>

CSS

ul.active>div{ 
      display: block; 
    }

來源

2012-10-14 06:59:08 Alisso

僅將輸入附加到當前hoverd li

回答

相關問題