Question

所以我目前正在制作Dropdown-List菜单，你可能会怀疑......我是新手。我希望这样做，以便当我打开Dropdown菜单时，这样当我悬停或点击它之外时，dropmenu应该再次隐藏。如何使这项工作成为可能？我在Stackoverflow上尝试了一些提示，但没有一个对我很有帮助。

正如您在下面看到的，我的下拉菜单中的onclick="toggle_visibility"名为（ID）“droppy”它有一个默认display:none;所以当我点击<a>标记时打开“droppy”/下拉菜单。但是，如果它在外面徘徊或只是在外面点击它应该再次关闭。这两种解决方案对我来说都没问题=）如果有人知道，请帮忙。谢谢！

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
         e.style.display = 'block';
    }

#nav #droppy{
	position:relative;
	left:90px;
	top: 17px;
	width: 225px;
	height: 150px;
	display:none;
	font-size: 25px;
	background-color: #304749;
	border-bottom: 1.6px solid black;
}

<div id="nav">
  <div id="fall">
    <a href="#" ="javascript:void(0)" onclick="toggle_visibility('droppy');">Menu</a>
  </div>
  <div id="droppy">
    <a href="airplanes">Våra Flygplan</a>
  </div>
</div>

Answer 1

见下面的代码。添加了单击事件以打开菜单和mouseout事件以隐藏。

＆＃13;

$('#fall a').mouseout(function() {
  $('#droppy').hide();
}).click(function(){
$('#droppy').show();
});

＆＃13;

#nav #droppy{
	position:relative;
	left:90px;
	top: 17px;
	width: 225px;
	height: 150px;
	display:none;
	font-size: 25px;
	background-color: #304749;
	border-bottom: 1.6px solid black;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <div id="fall">
    <a href="#" ="javascript:void(0)">Menu</a>
  </div>
  <div id="droppy">
    <a href="airplanes">Våra Flygplan</a>
  </div>
</div>

＆＃13;

Answer 2

请参阅此代码，我使用了悬停事件

/*
$( "#menu" ).hover(
  function() {
    $( "#droppy" ).show();
  }, function() {
    $( "#droppy" ).hide();
  }
);
*/
$("#menu").on("click",function(){
  $( "#droppy" ).show();
});

$( "#droppy" ).hover(
  function() {
    
  }, function() {
    $( "#droppy" ).hide();
  }
);

#nav #droppy{
	position:relative;
	left:90px;
	top: 17px;
	width: 225px;
	height: 150px;
	display:none;
	font-size: 25px;
	background-color: #304749;
	border-bottom: 1.6px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <div id="fall">
    <a href="#" ="javascript:void(0)" id="menu">Menu</a>
  </div>
  <div id="droppy">
    <a href="airplanes">Våra Flygplan</a>
  </div>
</div>

下拉菜单关闭，点击外面/悬停在外面

2 个答案: