phpstudy集成环境

 首页 > 初学JS碰到的点击事件的问题，请指教~~~

初学JS碰到的点击事件的问题，请指教~~~

如何用JS实现点击下面div框中的任何一个a标签，a标签中的内容自动跳转到上面的输入框且下面div框的内容都隐藏？？ 好吧，思路清晰点来说就是这样：
1，点击
显示下面的ul内容。

2.点击下面ul>li>a标签，ul的display又变为none;且被点击的a标签的内容替代上面中“请选择公告类型”.

3.如果点击事件1后，不进行事件2，而是鼠标点击到页面任何其他的地方，则执行ul中的display:none(等于页面又变为初始效果）。
写的比较啰嗦，我刚开始看JS，只完成了事件1，求各位大神，大仙，大牛，叔叔阿姨，哥哥姐姐，以及问道先于我的弟弟妹妹们，传我解答事件2之法，解我未解3之惑~~~
万分感谢，谢谢~谢谢~

PS:
这是我写的HTML:

<div class="container">
   <div class="nav" onclick="showTitle()"><span>请选择公告类型</span> <i class="fa fa-caret-down fa-4x"></i></div>
   <ul class="title">
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
      <li><a href="">百货零售</a></li>
      <li><a href="">半导体</a></li>
      <li><a href="">保险业</a></li>
      <li><a href="">不动产</a></li>
      <li><a href="">采矿业</a></li>
      <li><a href="">餐饮业</a></li>
      <li><a href="">黑色金属</a></li>
      <li><a href="">汽车制造业</a></li>
      <li><a href="">容器与包装</a></li>
      <li><a href="">软件</a></li>
      <li><a href="">家具制造业</a></li>
      <li><a href="">商务服务业</a></li>
      <li><a href="">建筑与房地产</a></li>
      <li><a href="">金融服务业</a></li>
      <li><a href="">生态保护和环境治理</a></li>
      <li><a href="">石油和天然气</a></li>
      <li><a href="">食品制造业</a></li>
   </ul>
</div>

这是我写的CSS

.nav
{
    border: 1px solid #4474b7;
    border-radius: 5px;
    color: #4474b7;
    height: 42px;
    width: 188px;
}
.nav span
{
    font-size: 18px;
    font-weight: bold;
    left: 10px;
    line-height: 42px;
    position: relative;
    text-align: center;
    top: -10px;
}
.nav i
{
    color: #99c46a;
    position: relative;
    right: -10px;
}
.title
{
    background-color: #eff6ff;
    border: 1px solid #d4daf8;
    border-radius: 5px;
    display: none;
    margin-top: 20px;
    padding-left: 14px;
    position: relative;
    width: 620px;
}
.title:before
{
    border-color: transparent #eff6ff #eff6ff transparent;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 0px;
    left: 100px;
    position: absolute;
    top: -20px;
    width: 0px;
}
.title li
{
    display: inline-block;
}
.title li:first-of-type
{
    margin-top: 17px;
}
.title li:last-of-type
{
    margin-bottom: 34px;
}
.title li a
{
    color: #2e2e2f;
    display: inline-block;
    font-size: 12px;
    line-height: 25px;
    width: 150px;
}
title li a:visited
{
    color: #2e2e2f;
}
.title li a:hover
{
    background-color: #d2ecfe;
    text-decoration: none;
}

a标签如果要href的话，最好加上javascript:;其实可以删掉了href

<a href="javascript:;">

下面是一个简单实现的JS代码，具体需求可能需要再按需要修改和优化

var $nav=$('.nav');
var $menu = $('.title'); 
var $a = $('.title a'); 

$nav.click(function(e){
    $menu.show();
    $(document).one("click", function(){ 
        $menu.hide();
    }); 
    e.stopPropagation(); 
});


$a.click(function(e){ 
    var txt=$(this).text();
    $nav.find('span').html(txt);
    $menu.hide();
});

第3个，感觉体验很差，而且需要侦听所有的页面元素，估计侦听和冒泡都耗费大量的资源。

废话不多说，搬运一段以前的代码，具体说明见注释。
2实际就是包含在3内，只不过3触发的时候需要查询触发元素是否在div内，在就触发2，否则就是3自身处理。
换句话说，你都监听全部元素了，还需要单独监听div内的？？

//点击页面任意一个位置，检测通知信息栏是否已显示，若显示，则隐藏，并更新消息栏
$(document).click(function (event) {
    var ele = event.target;
    var isNoticeObj = $(ele).attr("data-toggle") || $(ele).parents('#informationNoticewhole').length > 0;//是否是消息框内元素
    var isBroadObj = $(ele).parents('#broadcastInformation').length > 0;//是否是消息图标元素
    var infoEle = $("#informationNoticewhole");
    if (isBroadObj && !infoEle.is(":visible")) {//点击消息图标且消息框未显示时，弹出消息框
        infoEle.show();
        buckUpdate();   //更改消息状态
        unreadTotal(1); //显示未读消息各类别总数
        orderUnread(); //默认选中订单消息块
    } else if (isBroadObj && infoEle.is(":visible")) {//点击消息图标且消息框已显示时，关闭消息框并更新消息数目
        infoEle.hide();
        unreadTotal(1);
    } else if (!isNoticeObj && !isBroadObj && infoEle.is(":visible")) {//非消息框内和图标元素，消息框处于显示状态时，关闭消息框并更新消息数目
        infoEle.hide();
        unreadTotal(1);
    }
});
【热门文章】
【热门文章】