jquery对下拉菜单的效果，对所有元素的效果并不相同。

Question

我遇到了有关 jquery 下拉菜单的问题。我用 jquery 对其添加了“幻灯片”和“延迟”效果，但是只有当您将鼠标悬停在从右到左的链接上时，这才可以正常工作。当您以其他方式悬停时，延迟效果优先于下滑。我对 jquery 相当陌生，所以我很难理解这一点。这和html元素顺序有什么关系吗？

我尝试在 jquery 中的活动链接元素中添加“z-index”，我还尝试“隐藏”所有不活动的下链接，但没有一个起作用。

其次，我在代码的最后部分遇到了 jquery 问题，我试图隐藏联系人表单的输入表单和文本区域中的文本。我使用了从 http 获得的代码://cssglobe.com/post/2494/using-form-labels-as-text-field-values-free-script，一切正常，除了最后一行应该隐藏文本时您单击的字段中文本是。

jquery 代码显示在下方，要查看下拉菜单，请访问此站点：http://www.vstil.com

$(document).ready(function(){



 $("ul li").mouseenter(function(){

    $("ul",this).stop(true,true).slideDown("slow");


         }).bind("mouseleave",function(){
    $("ul",this).delay(500).slideUp("slow");
 });        



 $('form input[type="text"], textarea').each(function(){
    var theLabel = $(this).prev('label');


    $(this).css("color", "grey").attr('value',theLabel.html());


    theLabel.hide();
    }); 

});

如果有人想看这个，我将非常感激！

最好的问候

维加尔

Answer 1

试试这个代码。添加 z-index

$(document).ready(function(){
  $("ul li").mouseenter(function(){
    $("ul",this).stop(true,true).css("z-index", 10).slideDown("slow");
  }).bind("mouseleave",function(){
    $("ul",this).css("z-index",2).delay(500).slideUp("slow");
});     

编辑：

$('form input[type="text"], textarea').on("focus", function() {
  $this = $(this); 
  if ( $this.val() === $this.attr("data-text") ) $this.val("");
});  

向您的输入和文本区域 data-text="textOFLabel" 添加属性并删除标签。

例子：

<input type="text" value="textOFLabel" data-text="textOFLabel">