Javascript模糊_Javascript - Fatal编程技术网

Javascript模糊

javascript

Javascript模糊,javascript,Javascript,我正在学习Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到，带有“更多”和“设置”下拉菜单我使用onclick（）JS事件处理程序将ul设置为display:inline。如何使ul返回显示：单击页面上除现在可见的ul以外的任何其他位置时无我在谷歌上搜索过模糊，并将焦点设置为另一个元素，但我不知道如何真正做到这一点我想用纯Javascript而不是jQuery来实现这一点以下是我使用的html： <div class="

我正在学习Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到，带有“更多”和“设置”下拉菜单

我使用onclick（）JS事件处理程序将ul设置为display:inline。如何使ul返回显示：单击页面上除现在可见的ul以外的任何其他位置时无

我在谷歌上搜索过模糊，并将焦点设置为另一个元素，但我不知道如何真正做到这一点

我想用纯Javascript而不是jQuery来实现这一点

以下是我使用的html：

<div class="info">  
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text 
     <a onclick="menu('id2');">Another Link</a> | more text 
     <ul id="id1" class="submenu">  
       <li><a href="dfhdfh">A1</a></li>  
       <li><a href="aetjetjsd">A2 This is Long</a></li>  
       <li><a href="etetueb">A3</a></li>  
     </ul>  
    <ul id="id2" class="submenu">  
       <li><a href="dfhdfh">B1</a></li>  
       <li><a href="aetjetjsd">B2</a></li>  
       <li><a href="etetueb">B3</a></li>  
     </ul>  
  </div>

编辑2：

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
a
{
    color:blue;
}

.info ul.submenu
{
    border: solid 1px #e0e0e0;
    background-color: #fff;
    position: absolute;
    padding: 0;
    z-index: 2;
    display: none;
}

.info ul.submenu li
{
    display: block;
    border-top: solid 1px #e0e0e0;
    margin: 0px 10px 0 10px;
}

.info ul.submenu li a
{
    display: block;
    padding: 7px 0px 6px 0;
    color: #1177ee;
    cursor:pointer;
}

</style>

<script type="text/javascript">

function menu(id) {   
    var myLayer = document.getElementById(id);   

    myLayer.onblur = function() {     
        myLayer.style.display = 'none'; 
    }; 

    if (myLayer.style.display == "none" || myLayer.style.display == "") {   
        myLayer.style.display = "block";   
    } else {   
        myLayer.style.display = "none";   
    }   
}

</script>
</head>

<body>
<div class="info">   
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text  
     <a onclick="menu('id2');">Another Link</a> | more text  
     <ul id="id1" class="submenu">   
       <li><a href="dfhdfh">A1</a></li>   
       <li><a href="aetjetjsd">A2 This is Long</a></li>   
       <li><a href="etetueb">A3</a></li>   
     </ul>   
    <ul id="id2" class="submenu">   
       <li><a href="dfhdfh">B1</a></li>   
       <li><a href="aetjetjsd">B2</a></li>   
       <li><a href="etetueb">B3</a></li>   
     </ul>   
  </div>  
</body>
</html>


无标题1
A.
{
颜色：蓝色；
}
.info ul.子菜单
{
边框：实心1px#e0；
背景色：#fff；
位置：绝对位置；
填充：0；
z指数：2；
显示：无；
}
.info ul.子菜单li
{
显示：块；
边框顶部：实心1px#e0；
利润率：0px 10px 0 10px；
}
.info ul.子菜单li a
{
显示：块；
填充：7px 0px 6px 0；
颜色：#1177ee；
光标：指针；
}
功能菜单（id）{
var myLayer=document.getElementById（id）；
myLayer.onblur=函数（）{
myLayer.style.display='none'；
}; 
如果（myLayer.style.display==“无”| | myLayer.style.display==”）{
myLayer.style.display=“block”；
}否则{
myLayer.style.display=“无”；
}   
}
一些文字会发出隆隆声

jQuery创建了一个可以绑定函数的

模糊事件，有没有强烈的理由不使用jQuery？使用JavaScript库（即使只是用于事件处理）有助于避免浏览器差异。我只对表单中的文本输入或文本区域元素使用过焦点/模糊事件。听起来您希望列表浮动在其他元素之上。我会相对定位列表，并给它一个高于背景的z索引。我将单击事件绑定到列表外的区域，以关闭列表弹出窗口。切换弹出/模式窗口是您想要的吗？我想看看模态窗口的例子，或者如果你想自己使用的话，看看一个是如何实现的。
jQuery创建了一个可以绑定函数的模糊事件，有没有充分的理由不使用jQuery？使用JavaScript库（即使只是用于事件处理）有助于避免浏览器差异。我只对表单中的文本输入或文本区域元素使用过焦点/模糊事件。听起来您希望列表浮动在其他元素之上。我会相对定位列表，并给它一个高于背景的z索引。我将单击事件绑定到列表外的区域，以关闭列表弹出窗口。切换弹出/模式窗口是您想要的吗？我想看一看模态窗口的例子，或者如果你想自己使用的话，看看是如何实现的。
这实际上很简单
一旦有了要将blur
事件侦听器绑定到的DOM元素的引用，请按如下方式分配它：
myLayer.onblur = function() {
    myLayer.style.display = 'none';
};

这其实很简单
一旦有了要将blur
事件侦听器绑定到的DOM元素的引用，请按如下方式分配它：
myLayer.onblur = function() {
    myLayer.style.display = 'none';
};

如果您正在寻找一种方法来停止发生在菜单中的“onclick”事件，那么“event.stopPropagation（）；”可能就是您所需要的
<body onclick="menu('id1'); menu('id2');">
  <div class="info">  
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text 
     <a onclick="menu('id2');">Another Link</a> | more text 

     <ul id="id1" class="submenu" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">A1</a></li>  
       <li><a href="aetjetjsd">A2 This is Long</a></li>  
       <li><a href="etetueb">A3</a></li>  
     </ul>  
    <ul id="id2" class="submenu" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">B1</a></li>  
       <li><a href="aetjetjsd">B2</a></li>  
       <li><a href="etetueb">B3</a></li>  
     </ul>  
  </div> 
</body>


一些文字会发出隆隆声








如果您正在寻找一种方法来停止菜单中发生的“onclick”事件，那么“event.stopPropagation（）；”可能就是您所需要的
<body onclick="menu('id1'); menu('id2');">
  <div class="info">  
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text 
     <a onclick="menu('id2');">Another Link</a> | more text 

     <ul id="id1" class="submenu" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">A1</a></li>  
       <li><a href="aetjetjsd">A2 This is Long</a></li>  
       <li><a href="etetueb">A3</a></li>  
     </ul>  
    <ul id="id2" class="submenu" onclick="alert('click menu'); event.stopPropagation();">  
       <li><a href="dfhdfh">B1</a></li>  
       <li><a href="aetjetjsd">B2</a></li>  
       <li><a href="etetueb">B3</a></li>  
     </ul>  
  </div> 
</body>


一些文字会发出隆隆声








我已经让下拉菜单工作了。我不知道如何将单击事件绑定到列表之外的区域；这是我的问题。我不想使用jQuery，因为我对jQuery一无所知。我只是想学习Javascript，然后尝试一下jQuery。在下拉列表之外的区域添加一个单击处理程序，这可能是body元素。然后使用z-index属性将下拉列表放置在其他元素的顶部。现在，单击下拉列表外部可以触发事件处理程序来关闭下拉列表。点击下拉菜单不会触发“关闭下拉”功能。我已经有了下拉菜单。我不知道如何将单击事件绑定到列表之外的区域；这是我的问题。我不想使用jQuery，因为我对jQuery一无所知。我只是想学习Javascript，然后尝试一下jQuery。在下拉列表之外的区域添加一个单击处理程序，这可能是body元素。然后使用z-index属性将下拉列表放置在其他元素的顶部。现在，单击下拉列表外部可以触发事件处理程序来关闭下拉列表。点击下拉菜单不会触发“关闭下拉菜单”功能，所以我只是更新了帖子，加入了我目前使用的javascript。我应该把你的代码放在哪里。我把它放在这行后面吗<代码>var myLayer=document.getElementById（id）？我知道我可以将onblur=”“事件添加到html中，但您似乎在建议一种方式，使onblur（）事件不需要显式，而是通过javascript以某种方式绑定到id。@Jim，对于您的第一条评论，是的，元素
在我的代码中应该是myLayer
。B