Question

In the demonstration below, clicking the arrow in the small blue box opens a menu. But only clicking directly on the arrow itself will trigger the menu. How can I make a click anywhere in the small blue box open the menu?

I tried putting the <a> tag first, but the menu disappeared.

body {
  margin-top: 50px;
}
ul.dropdown-menuoption {
  top: auto;
  background: #337ab7;
  border-width: 0;
}
.prSemTA {
  background: #337ab7;
  border-radius: 3px;
  font-size: 15px;
  padding: 3px 5px 3px 4px
}
.prSemTA a {
  color: #FFF;
  text-decoration: none;
}
.prSemTA a:hover {
  color: #333;
  text-decoration: none;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div style="float:left;padding-left:5px;">
  <div class="pull-left prSemTA">
    <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <i class="glyphicon glyphicon-chevron-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-menuoption">
      <li><a href="#"> <i class="glyphicon glyphicon-comment"></i> xxx</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-heart"></i> xxx</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-edit"></i> xxx</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-remove"></i> xxxx</a></li>
    </ul>
  </div>
</div>

View on JSFiddle

Answer 1

您可以尝试以下代码：

 .prSemTA {
   background: #337ab7;
   border-radius:3px;
   font-size:15px;
}
.prSemTA a {
  color: #FFF;
  text-decoration: none;
  display:block;
  padding:3px 5px 3px 4px
}

Working Demo

使可点击区域为<a> fill containing </a> <div> <a>

1 个答案: