单击水平主菜单时显示页面左侧的子菜单;显示/隐藏div错误

时间:2011-11-15 19:39:14

标签: jquery asp.net-mvc menu

我一直在尝试显示水平主菜单,点击主菜单中的项目后,页面左侧将垂直显示子菜单。 这是母版页。

<div id="middlebar">
   <ul class="menu">                          
     <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
     <li id="lnkConfiguration" ><%= Html.ActionLink("Configuration", "Index", "User")%>/li>
     <li><%= Html.ActionLink("Application Authentication",  "Index",ApplicationAuthentication")%></li>
     <li id="lnkUserAuthentication"><%= Html.ActionLink("User Authentication", "Index",  "UserAuthentication")%></li>
     <li><%= Html.ActionLink("About", "About", "Home")%></li>
  </ul>                   
</div> 
<div>
 <table width="100%">
     <tr valign="middle">
      <td style="width:150px" >
        <div id="divConfiguration" >
           <%Html.RenderPartial("SubMenuConfiguration"); %>
        </div>
      </td>
      <td><asp:ContentPlaceHolder ID="MainContent" runat="server" /></td>
     </tr>
   </table>
 </div>

我试图隐藏子菜单,直到单击主菜单。这是脚本:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $("#divConfiguration").hide();
     $('#lnkConfiguration').click(function() {
     $('#divConfiguration').show(); //.toggle(400);                     
     });
   })                      
 </script>

但是,发生的情况是,单击配置菜单并且页面指向控制器时会出现子菜单。一旦页面加载,子菜单就会消失。发生这种情况是因为在单击配置选项卡后页面重新加载后脚本会再次运行。为了解决这个问题,我可能需要设置一些指示我在配置页面上的内容,以便不隐藏子菜单。但是,我不知道在哪里设定价值。是否在用户控制器索引操作中?如果是,如何将值传递给母版页单击事件?有什么建议吗?

1 个答案:

答案 0 :(得分:0)

我之前从未使用过asp,如果这是错误的话,请对不起,但这会阻止链接加载并打开div。如果您需要加载链接以便在#divConfiguration中包含内容,那么我建议使用ajax。

$(document).ready(function() {
    $("#divConfiguration").hide();
    $('#lnkConfiguration').click(function(e) {
        e.preventDefault();
        $('#divConfiguration').show(); //.toggle(400);                     
    });
});

AJAX: 使页面仅在收到后置变量后显示div配置

        $.ajax({
            type: 'POST',
            url: 'divconfiguration.asp',
            data: 'page='$(this).attr('href'),
            success: function (msg) {
            $('#divConfiguration ').html(msg).show();
            }
        });