jQuery - 移动没有class / id的链接

Question

我正在编写一个Enjin网站。还有一个下拉列表，其中包含所有管理面板选项。在我添加了引导程序导航栏之后，这就是它的样子。

正如您所看到的，管理员已将自己置于导航栏的最后一个下拉列表中。 admin下拉列表的代码如下所示：

<div class="left">
        <a href="/" style="display: none;">CorruptionCraft</a><span class="divider">|</span><a href="/admin"></a><a href="/admin" onmouseover="Enjin_Core.dropdownMenu([['Users','/admin/users',0],['Games','/admin/games',0],['Pages','/admin/layout',0],['Modules','/admin/modules',0],['Voice','/admin/voice',0],['Themes','/admin/themelayout',0],['Files','/admin/files',0],['Settings','/admin/settings',0],['','divider'],['&lt;a href=\'javascript:void(0);\' class=\'menu-link\' onclick=\'Enjin_Core.toggleEditMode(this);\'&gt;Quick edit&lt;/a&gt;', 'html'],['&lt;a class=\'menu-link\' href=\'/admin/layout/index/page/3661170\'&gt;Edit page layout&lt;/a&gt;', 'html'],['','divider'],['Help Wiki','http://wiki.enjin.com',1],['Live Help Chat','http://www.enjin.com/forums#livehelp',1],['Support Forums','http://www.enjin.com/forums',1],['Email Support','http://www.enjin.com/support/form',1]], $(this), 'enjinbar-menu');"><span style="">Admin</span></a><span class="arrow" style="border-top-color: gray;"></span>       </div>

如您所见，它没有相对ID或类。在以前移动它时，我使用jQuery为链接添加填充：

 $(document).ready(function() {
 $.get('/login/do/joinsite', function(data) {});
 $("a[href^='/admin']:contains('Admin')").html("<span style='padding-left:80px'>Admin</span>");

但是，虽然它将链接移动到所需位置，但所有填充仍然是链接的。因此，当将鼠标悬停在没有填充的Admin文本的位置时，它仍会打开下拉列表。我想完全移动文本，没有这个烦人的bug。 如您在此图片中所示： 请原谅我的油漆用量 - 但你可以希望看到这个问题，并为我提供修复。由于Enjin是一个网站建设者，我不能直接编辑管理员代码，需要一些额外的代码来改变它。

Answer 1

padding扩展了可点击区域。您应该使用margin，而不是<span/>内创建的<a/>。直接将其应用于<a/>：

$("a[href^='/admin']:contains('Admin')").css("margin-left", "80px");