如何使用 MVC3 Razor 在 _layout.cshmtl 上创建悬停下拉操作链接

How can I create a hover drop down action link on _layout.cshmtl using MVC3 Razor

本文关键字：悬停 创建 链接 操作 cshmtl MVC3 何使用 Razor layout      更新时间：2023-09-26

我有一个像这样水平显示的导航菜单。

                <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About Us", "About_Us", "Home")</li>
                    <li>@Html.ActionLink("What We Do", "What_We_Do", "Home")</li>
                    <li>@Html.ActionLink("FAQ's", "Answers_To_Questions", "Home")</li>
                    <li>@Html.ActionLink("Deed Transfer Gurantee's", "Deed_Transfer_Guarantee", "Home")
                    </li>
                    <li>@Html.ActionLink("Power Point", "Index", "Home")</li>
                    <li>@Html.ActionLink("Get Help", "Index", "Home")</li>
                    <li>@Html.ActionLink("Mortgage Cancellation", "Index", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Index", "Home")</li>
                </ul>
            </div>

我正在寻找一种方法来创建下拉链接，使其仅在将鼠标悬停在特定链接时可见。我需要Deed_Transfer_Guarantee操作链接在Deed_Transfer_Guarantee悬停时显示另一个操作链接。我还没有找到一个明显的例子。提前感谢任何帮助！

查看此 jquery 示例。您所要做的就是将" <span> ***</span> "替换为超链接

这可能

有所帮助：

$("#menu li a").each(function(){
     var $this = $(this);
     $("<a></a>").html($this.html()).attr("href",$this.attr("href")).addClass("dropdown").slideUp(0).appendTo($this);
}).hover(function(){
    $("a",$(this)).slideDown(500);        
}
,function(){
     $("a",$(this)).slideUp(500);      
});

然后你需要一些 css：

#menu li>a{position:relative;}
#menu li a a.dropdown {position:absolute;left:0px;top:100%;}

我认为这可以完成工作。

我认为使用新的 li 标签会给你一个下拉菜单，而不是在线 jquery 示例中的"滑出"。这基本上是大黄蜂的答案。

<script> 
$(document).ready(function(){
$("#Deed Transfer Gurantee's").hover(function(){
 $(this).append($('<li>@Html.ActionLink(@*whatever parameters you need*@)</li>'));
    });
 });
</script>
相关文章：