悬停和显示管理按钮
在我的脑海中，有一个很大的问题。或者仅仅是理解悬停功能的问题。我尝试了很多方法，读了很多教程，但都不明白，我需要什么。这可能很愚蠢，但我正在用知识水平不高的jQuery制作前端管理面板。
正如您在this image中看到的，这是一个普通的eshop列表。我想让它，如果你是一个管理员，当你悬停一个项目时，你可以看到管理按钮，就像在this image中一样，但只在悬停的项目上。请帮我轻松解决这个问题。
无论如何，下面是我在页面这一部分的代码：
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$(".admin_item").hide();
$('.item').hover(function() {
$(".admin_item").slideToggle(".admin_item");
});
});
</script>
<!-- $admin_item -->
<?
$admin_item = '<div class="admin_item" style="position: absolute; padding-left: 380px;"><a href="?edit"><img src="style/icon/pencil.png" alt="" /></a><a href="?delete"><img src="style/icon/delete.png" alt="" /></a></div><div class="clear"></div>';
?>
<!-- list -->
<div class="page_content" id="goods">
<?
$items = array (
1 => array("Lorem ipsum dolor sit amet, consectetur adipiscing elit.","3.65","List 3-1"),
2 => array("Proin ut est ut purus venenatis suscipit tristique id mi.","4.00","List 3-2"),
3 => array("Integer posuere mauris dapibus massa malesuada id malesuada velit congue.","5.49","List 3-3"),
4 => array("Vivamus eu purus quam, ut convallis urna.","7.40","List 3-2"),
5 => array("Suspendisse eu felis erat, ut mollis erat.","8.20","List 3-1"),
6 => array("Morbi malesuada facilisis neque, at dapibus nibh elementum quis.","9.85","List 3-1"),
7 => array("Proin euismod mauris ac lorem sodales faucibus.","10.00","List 3-2"),
8 => array("Maecenas vitae neque ac nibh venenatis laoreet nec sed nisi.","12.90","List 3-3"),
);
$i=1;
foreach($items as $item) :
?>
<?=$admin_item?>
<div class="item">
<div class="details floatleft">
<div class="image floatleft"><img src="images/items/example/thumbs/<?=$i?>_s.jpg" alt=""></div>
<div class="description floatleft"><?=$item[0]?></div>
<div class="price floatleft">LVL <?=$item[1]?></div>
<div class="category floatleft"><?=$item[2]?></div>
</div>
<div class="cart floatleft"><img src="style/shopping_cart.png" alt="" /></div>
</div>
<div class="clear"></div>
<? $i++; endforeach;?>
</div>回答 3
Stack Overflow用户
发布于 2010-11-23 05:37:56
这可能是因为您正在像这样进行幻灯片切换：
$(".admin_item").slideToggle(".admin_item");应该是：$(".admin_item").slideToggle([ duration ], [ easing ], [ callback ]);
试试这个：$(".admin_item").slideToggle('fast');
Stack Overflow用户
发布于 2010-11-23 05:38:59
好吧，我假设你正在使用会话变量来保存你的用户信息。你可能应该编辑你的帖子来包含这些信息，因为它非常相关。
因此，当用户登录时，设置一个会话变量$_SESSION['permit'] = "admin";，或者有时使用数字特权级别更容易：$_SESSION['permit'] = 100;。
现在，当您加载此PHP时，获取会话变量并将其放入local：$permit = $_SESSION['permit'];，然后在用于创建销售项目的循环中有一条if语句，如下所示，您希望管理面板出现的位置：
if($permit > 10) {
echo "<div class='admin_item' style='position: absolute; padding-left: 380px;'><a href='?edit'><img src='style/icon/pencil.png' alt='' /></a><a href='?delete'><img src='style/icon/delete.png' alt='' /></a></div><div class='clear'></div>";
}现在，在您的jquery中放入以下内容：
$("div.item").hover(function() {
$("div.admin_item").slideToggle(500);
});希望这能有所帮助！
编辑：抱歉，你在我写回复的时候编辑了你的帖子。您实际的jquery错误是您错误地编写了slideToggle函数。语法如下：$(“object”).slideToggle(时长)；
在http://api.jquery.com/slideToggle/上查看文档
Stack Overflow用户
发布于 2010-11-23 06:27:17
我做到了！:)
就像这样简单：
$("div.admin_item").hide();
$("div.item").hover(function() {
$(this).find("div.admin_item").fadeIn(500);
},function(){
$(this).find("div.admin_item").fadeOut(500);
});感谢大家的支持！
https://stackoverflow.com/questions/4250349
复制相似问题
腾讯云开发者
