中心导航徽标删除父div点击功能

Question

我正在尝试完成以下操作，但出于某种原因，我无法将图像保留在中心，就像下面的布局一样。

问题是整个div甚至徽标都是可点击的，我只希望图标可点击。

我还希望徽标保留在中心，菜单图标与下图完全相同。

$(document).ready(function() {
	$(".mobile-menu").on('click', function(){
		$(".mobile-dropdown").slideToggle("fast");
	});
});

.mobile-menu {
  width: auto;
  position: relative;
  padding: 0;
}

.logo{
	display: inline-block;
}

.mobile-menu a.dropdown-link{
  display: block;
  height: 80px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  background: #000000;
}

.mobile-menu a.dropdown-link:hover{
	text-decoration: none;
}
.mobile-menu a.dropdown-link i{
	float: right;
	position: relative;
	top: 15px;
}

.mobile-dropdown {
  display: none;
  list-style-type: none;
  background: #000000;
  padding: 0;
  min-width: 125px;
  position: relative;
  z-index: 100;
  margin: 0;
}

.mobile-dropdown li{
  padding: 0;
  height: auto;
}

.mobile-dropdown li a{
  color: #FFFFFF;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-decoration: none;
}

.mobile-dropdown li a:hover{
  text-decoration: none;
  background: #00adef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="mobile-menu">
  <img class="logo" src="http://via.placeholder.com/65x65">
  <a class="dropdown-link">&#9776;</a>
  <ul class="mobile-dropdown">
    <li><a href="#">Uw specialist</a></li>
    <li><a href="#">Oplossingen</a></li>
    <li><a href="#">Greatest care</a></li>
    <li><a href="#">Budget smart</a></li>
    <li><a href="#">Over ons</a></li>
  </ul>
</div>

Answer 1

使用您目前拥有的标记，您可以完全定位徽标。使用left:0，right:0和margin:auto将其置于中心位置。

$(document).ready(function() {
	$(".dropdown-link").on('click', function(){
		$(".mobile-dropdown").slideToggle("fast");
	});
});

.mobile-menu {
  width: auto;
  position: relative;
  padding: 0;
  background:black;
}

.logo{
	display: block;
  position:absolute;
  top:7px;
  left:0;
  right:0;
  margin:auto;
}

.mobile-menu a.dropdown-link{
  display: block;
  height: 80px; width:80px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  background: #000000;
}

.mobile-menu a.dropdown-link:hover{
	text-decoration: none;
}
.mobile-menu a.dropdown-link i{
	float: right;
	position: relative;
	top: 15px;
}

.mobile-dropdown {
  display: none;
  list-style-type: none;
  background: #000000;
  padding: 0;
  min-width: 125px;
  position: relative;
  z-index: 100;
  margin: 0;
}

.mobile-dropdown li{
  padding: 0;
  height: auto;
}

.mobile-dropdown li a{
  color: #FFFFFF;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-decoration: none;
}

.mobile-dropdown li a:hover{
  text-decoration: none;
  background: #00adef;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="mobile-menu">
  <img class="logo" src="http://via.placeholder.com/65x65">
  <a class="dropdown-link">&#9776;</a>
  <ul class="mobile-dropdown">
    <li><a href="#">Uw specialist</a></li>
    <li><a href="#">Oplossingen</a></li>
    <li><a href="#">Greatest care</a></li>
    <li><a href="#">Budget smart</a></li>
    <li><a href="#">Over ons</a></li>
  </ul>
</div>