怎么阻止冒泡啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/ui.css">
<title>幕淘网</title>
</head>
<body>
<!-- top部分 -->
<div class="top">
<div class="center">
<div class="left top-left">
<ul>
<li class="left">
<a href="#1" style="color: #f01414;">亲，请登录</a></li>
<li class="left"><a href="#1">免费注册</a></li>
<li class="left"><a href="#1">手机逛幕多多</a></li>
</ul>
</div>
<div class="right">
<div class="top-dropdown">
<div class="left dropdown-item ">
<div class="dropdown-toggle">
<a href="">我的幕多多</a>
<i class="dropdown-icon"></i>
</div>
<ul class="dropdown-layer dropdown-left">
<li>
<a href="" class="dropdown-items">已买到的宝贝</a>
<a href="" class="dropdown-items">我的足迹</a>
</li>
</ul>
</div>
<div class="left dropdown-item">
<div class="dropdown-toggle"> <a href=""> 收藏夹</a><i class="dropdown-icon"></i></div>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-items">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-items">收藏的店铺</a></li>
</ul>
</div>
<div class="left dropdown-item">
<div class="dropdown-toggle"> <a href=""> 商品分类</a></div>
</div>
<div class="left dropdown-item">
<div class="dropdown-toggle"><a href="">卖家中心</a><i class="dropdown-icon"></i></div>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="dropdown-items">免费开店</a></li>
<li><a href="###" target="_blank" class="dropdown-items">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-items">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="dropdown-items">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="dropdown-items">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="dropdown-items">体验中心</a></li>
</ul>
</div>
<div class="left dropdown-item ">
<div class="dropdown-toggle"><a href=""> 联系客服</a><i class="dropdown-icon"></i></div>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="dropdown-items">消费者客服</a></li>
<li><a href="###" target="_blank" class="dropdown-items">卖家客服</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------- top部分 ------------------------------->
<!---------------------------------- logo部分------------------------------- -->
<div class="logo">
<div class="center">
<div class="logo-logo left">
<a href="" class="logo-logo-img"></a>
</div>
<div class="logo-search left">
<form action="https://s.taobao.com/search" id="form">
<input type="text" placeholder="灵魂没事一元抢" name="q" class="left search-input" autocomplete="off"></input>
<input type="submit" value="搜索" class="left search-submit"></input>
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item text-ellipsis">123</li>
<li class="search-layer-item text-ellipsis">123</li>
<li class="search-layer-item text-ellipsis">123</li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- -----------------------------------logo部分----------------------------------------- -->
<script type="text/javascript" src="./js/jq.js"></script>
<script type="text/javascript" src="./js/top.js"></script>
<script type="text/javascript" src="./js/search.js"></script>
</body>
</html>
.top {
height: 44px;
line-height: 44px;
background: #f3f5f7;
font-size: 10px;
}
.top .center {
border-bottom: 1px solid #cdd0d4;
height: 100%;
}
.top .top-left li a {
display: inline-block;
padding-left: 25px;
color: #4d555d;
}
.top-dropdown .dropdown-item a:hover,
.top .top-left li a:hover {
color: #f01414;
text-decoration: none;
}
.top-dropdown {
height: 100%;
}
.dropdown-toggle {
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.top-dropdown .dropdown-item {
position: relative;
}
.dropdown-icon {
display: inline-block;
width: 8px;
height: 6px;
background: url(../作业素材/code/img/dropdown-arrow.png) no-repeat;
margin-left: 8px;
vertical-align: middle;
cursor: pointer;
}
.top-dropdown .dropdown-item a {
color: #4d555d;
}
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
right: 0;
left: auto;
}
.dropdown-layer {
display: none;
position: absolute;
top: 43px;
background-color: #fff;
z-index: 1;
border: 1px solid #cdd0d4;
}
.dropdown-items {
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.dropdown-items:hover {
background-color: #f3f5f7;
}
.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle {
background-color: #fff;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-icon,
.dropdown:hover .dropdown-icon {
background-image: url(../作业素材/code/img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer {
display: block;
}
/* -----------------top部分------------------------ */
/* ------------------logo部分------------------- */
.logo {
background: #f3f5f7;
line-height: 126px;
height: 126px;
width: 100%;
}
.logo-logo a {
cursor: pointer;
display: block;
width: 212px;
height: 58px;
margin: 36px 0 0 15px;
text-indent: -9999px;
overflow: hidden;
background: url(../作业素材/code/img/header-logo.png) no-repeat;
}
.logo-search {
width: 680px;
height: 42px;
border: 1px solid #cfd2d5;
margin-top: 38px;
margin-left: 150px;
position: relative;
}
.search-input {
width: 586px;
height: 42px;
border: none;
background: #fff;
padding: 0 10px;
line-height: 42px;
}
.search-submit {
border: none;
outline: none;
background: #ca003f;
color: #fff;
height: 42px;
width: 74px;
cursor: pointer;
}
.search-layer {
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item {
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}
.search-layer-item:hover {
background-color: #f3f5f7;
}
/* ------------------logo部分------------------- */
.clearfloat {
zoom: 1;
}
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
* {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
ul,
li {
list-style: none;
}
.right {
float: right;
display: inline;
}
.left {
display: inline;
float: left;
}
.center {
margin: 0 auto;
width: 1200px;
}
.text-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
(function($) {
var $search = $(".logo-search");
var $form = $search.find("#form");
var $input = $search.find(".search-input");
var $submit = $search.find(".search-submit");
var $layer = $search.find(".search-layer");
var $layerItem = $search.find(".search-layer-item");
$form.on('submit', function() {
if ($.trim($input.val()) === '') {
return false;
}
});
$input.on("input", function() {
var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' +
encodeURIComponent($.trim($input.val()));
//encodeURIComponent 把字符串作为URI组件进行编码
$.ajax({
url: url,
dataType: 'jsonp'
}).done(function(data) {
var html = "",
dataNum = data['result'].length,
maxNum = 10;
if (dataNum === 0) {
$layer.hide().html('');
return
}
for (var i = 0; i < dataNum; i++) {
if (i >= maxNum) break;
html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
}
$layer.show().html(html);
}).fail(function() {
$layer.hide().html('');
}).always(function() {
console.log('why always me!');
});
});
$layer.on('click', '.search-layer-item', function() {
$input.val($(this).text());
$layer.hide();
})
$input.on("focus", function() {
$layer.show();
})
/* .on("blur", function() {
$layer.hide();
}) */
/* $(document).on('click', function() {
$layer.hide();
}) */
})(jQuery);
怎么才能点击外面的时候下拉列表隐藏
正在回答
同学你好，老师这里测试，这样写，再次点击输入框的时候，还是可以显示下拉菜单的。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星