javascript - 初学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();
}); 

这篇关于javascript - 初学JS碰到的点击事件的问题，请指教~~~的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！