在bootstrap中有一个弹出菜单的组件，demo如下，点击Dropdown按钮，弹出菜单，选择菜单中的一项，菜单会关闭，点击页面上其他任何地方，菜单也会消失。现在想修改一下，改为点击弹出菜单元素内部，菜单不消失，点击菜单以外的地方，菜单能消失。js怎么写？demo代码如下,复制粘贴即可看到效果。
ps:如果修改不方便的话，自己应该怎样写？
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jvectormap/2.0.4/jquery-jvectormap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
</body>
</html>
把dropdown去掉不就得了