不能隱藏掣子元件由於某種原因

我有我的網站的元素，它看起來像這樣：不能隱藏掣子元件由於某種原因

<div class="nw_help"><div class="nw_help_content">...</div></div>

簡單的東西。在nw_help：hover上使用CSS，可以看到nw_help_content。爲了支持觸摸屏也一樣，我寫了下面的：

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     $(this).find(".nw_help_content").css('visibility', 'visible'); 
    }); 
}); 
$(document).ready(function() { 
    $('.nw_help_content').click(function() { 
     $(this).css('visibility', 'hidden'); 
    }); 
});

第一個功能完美的作品，第二個根本不想要的工作。我檢查了$（'。nw_help_content'）.css（'visibility'，'hidden'）;正在瀏覽器的控制檯工作，它是。

任何想法？

非常感謝您的回答。

編輯：現在它打我：單擊nw_help_content觸發第一個函數，它「中立」第二個函數。但如何預防呢？

來源

2013-06-19 Wojciech Maj

你使用的是Firefox嗎？因爲在切換「可見度」時存在一些已知問題。試試'opacity'來代替，只是爲了檢查這是否有效。 – supersize

是的，我正在使用它，爲什麼？ –

我相信，如果您在頁面呈現中隱藏了可見性，則該元素永遠不會呈現。您需要事件授權：

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     $(this).find(".nw_help_content").css('visibility', 'visible'); 
    }); 


    $(document).on('click', '.nw_help_content', function() { 
     $(this).css('visibility', 'hidden'); 
    }); 
});

另外，只需要一個DOM就緒語句。

演示：http://jsfiddle.net/7sM3L/4/

來源

2013-06-19 23:16:14 tymeJV

@WojciechMaj這實際上並不是它不起作用的原因。第一句話是虛假的。 – lifetimes

是的這是錯誤的，一直試圖找到我讀的地方，我可能只是想象它。刪除。 @WojciechMaj - 你可以不接受這個，所以我可以刪除？ – tymeJV

@tymeJV不用擔心，我猜你在想顯示器：沒有，在這種情況下，它會是真的 – lifetimes

我建議住從直接的CSS規則處理掉這一點。只需使用jQuery顯示和隱藏將提供更堅實/可靠的結果。

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     $(this).find('.nw_help_content').show(); 
    }); 
}); 
$(document).ready(function() { 
    $('.nw_help_content').click(function() { 
     $(this).hide(); 
    }); 
});

來源

2013-06-19 23:18:26

它實際上是工作/自div的嵌套你是兩個事件火災和股利是隱藏的，在相同的點擊所示。代替使用toggle。

$(document).ready(function() { 
     $('.nw_help').click(function() { 
      $(this).find(".nw_help_content").toggle(); 
     }); 
    });

退房的fiddle

來源

2013-06-19 23:25:37 raam86

由於真力時說，這是由於事件冒泡......另一種解決方案是綁定事件只對外部容器，只是檢查的公開程度：

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     var content = $(this).find('.nw_help_content'); 
     if(content.css('visibility') == 'hidden') { 
      content.css('visibility','visible'); 
     } else { 
      content.css('visibility','hidden'); 
     } 
    }); 
});

來源

2013-06-19 23:30:19 ponysmith

不能隱藏掣子元件由於某種原因

回答

相關問題