Question

我有菜单列表，其中包含子菜单，如下面的代码所示。

<li class="current">
  <a href="javascript:void(0);"><span class="icon4"></span>Subscriptions</a>
  <ul class="sub-menu">
    <li><a href=" @Url.Content(" ~/SuperAdmin/ViewSubscriptions ") ">View Subscriptions</a>
    </li>
    <li class="@((ViewBag.PageName == " Subscription ") ? "active " : " ")"><a href="@Url.Content(" ~/SuperAdmin/ManageSubscriptionPlan ")">Manage Subscription Plans</a>
    </li>
  </ul>
</li>
<li class="current">
  <a href="javascript:void(0);"><span class="icon5"></span>Administration</a>
  <ul class="sub-menu">
    <li class="@((ViewBag.PageName == " AssetPage ") ? "active " : " ")"><a href="@Url.Content(" ~/SuperAdmin/AssetsPage ")">Assets</a>
    </li>
    <li><a href="@Url.Content(" ~/SuperAdmin/ConfigureText ")">Configure Text</a>
    </li>
    <li><a href=" @Url.Content(" ~/SuperAdmin/ErrorLog ")">Error Log</a>
    </li>
    <li><a href=" @Url.Content(" ~/SuperAdmin/ProductSettings ") ">Product Settings</a>
    </li>
  </ul>
</li>
<li class="current">
  <a href="#"><span class="icon6"></span>Promo Codes</a>
  <ul class="sub-menu">
    <li><a href="@Url.Content(" ~/SuperAdmin/ManagePromoCode ")">Manage Promo Code</a>
    </li>
    <li><a href=" @Url.Content(" ~/SuperAdmin/UserPromoCodeDetails ") ">Used Promo Code</a>
    </li>
  </ul>
</li>

此处Subscription，Administration，Promo Codes是菜单列表，其中包含子菜单列表。

当用户点击class=current，管理Subscription促销代码`时，我想动态应用,。

我在MVC LayoutPage中这样做。

任何帮助将不胜感激。

Answer 1

这里有一个可行的解决方案：https://jsfiddle.net/c4h3sup9/

你必须使用一点Javascript。你必须给listitems一个其他的类名，比如我的例子＆＃34; operator＆＃34;

document.body.addEventListener("click", function(e){
  if(e.target && e.target.className == "operator"){         
    var actives = document.getElementsByClassName("active");
    actives[0].setAttribute("class", "operator");
    e.target.setAttribute("class", "active");
  }
});

对于此示例，您需要从一开始就将一个元素作为活动元素。

注意：

LI元素永远不是UL的父母。

订单是：

无序列表（复数） - ＆gt;列表项（Singular，Child）。

您可能需要更正，因为它不符合标准。

Answer 2

要将类名添加到父<li>元素，请为主链接指定类名。假设您还想从已有它的任何<li>元素中删除它，也给它们一个类名

<li class="container">
    <a href="javascript:void(0);"class="mainmenu"><span class="icon4"></span>Subscriptions</a>

，脚本将是

$('.mainmenu').click(function() {
    $('.container').removeClass('current'); // remove any previous
    $(this).closest('.container').addClass('current');
});

此外，如果您使用此布局导航到其中一个视图，以及将类名添加到相应元素的内容，那么您可以为<li>元素提供id属性< / p>

<li id="subscriptions" class="container">
   ....
</li>
<li id="administration" class="container">
   ....

并在GET方法中，将id的值传递给视图（例如，使用ViewBag

public ActionResult ConfigureText()
{
    ViewBag.Menu = "administration";
    ....
    return View(...);
}

并添加在首次加载页面时运行的脚本

var menu = '@ViewBag.Menu";
$('#' + menu).addClass('current');

动态添加class =“current”

2 个答案: