Question

我有一个菜单，但我的图标不想转到菜单项旁边。

我在使用此代码时工作

<li class="dropdown"> <a class="dropdown-toggle" data-over="dropdown" href="partners.php">Partners</a> <span class="caret"></span> </a> </li>

我更改了它，因为当用户点击link-menu-item时我想要一个单独的链接，并且想让我的插入符号用于下拉菜单，所以我要改为：

<li class="dropdown">
   <a href="partners.php">Partners</a>
   <a class="dropdown-toggle" data-hover="dropdown">
      <span class="caret"></span>
   </a>
</li>

我将dropdown-toogle移至<a> tag移至<span class='caret'>，现在我<a> tags内有两个<li>，但插入的文字不在文本旁边无缘无故..

有什么想法吗？

这是我的代码示例

＆＃13;

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.dropdown-menu li a').click(function(){
     $(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse btnCollapse"><div class="collapse navbar-collapse btnCollapse">
    <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li class="dropdown">
            <a href="partners.php">Partners</a><a class="dropdown-toggle" data-hover="dropdown"><span class="caret"></span></a>
			<ul class="dropdown-menu" role="menu"> 
				<li>
					<div class="container">
						<div class="row">  
							<ul class="col-sm-4">
								<li><a href="partner.php?partner_id=106">Club</a></li> 
							</ul>	                    
						</div>
					</div>
				</li> 
			</ul>
        </li> 
        <li><a href="login"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</a></li>    </ul>
</div></div>

＆＃13;

也是一个小提琴：https://fiddle.jshell.net/xjpt2p44/

原因仅在完整模式下显示代码段

Answer 1

添加此css

.nav .dropdown > a { display: inline-block; }

Caret图标不想转到菜单项旁边

1 个答案: