Question

我有一个菜单

 <nav>
    <ul id="menu">
        <li>  <a href="@Url.Action("Index", "Home")" title="Home">HOME</a></li>
        <li><a href="@Url.Action("Index","Project")" title="Project">PROJECTS</a></li>
        <li><a href="@Url.Action("Index","Event")" title="Event">EVENTS</a></li>
       ....
     </ul>
 </nav>

我是小屏幕（手机/平板电脑）的情况我使用jquery将此菜单更改为下拉列表。

  @if (!string.IsNullOrEmpty(ViewBag.CurrentPage)) {        
  <script type="text/javascript">
 $(function () {
     $("a[title=@ViewBag.CurrentPage]").addClass("active");

     $("<select />").appendTo("nav");
     // Create default option "Go to..."
     $("<option />", {
         "selected": "selected",
         "value": "",
         "text": "Go to..."
     }).appendTo("nav select");
     // Populate dropdown with menu items
     $("nav ul a").each(function () {
         var el = $(this);
         $("<option />", {
             "value": el.attr("href"),
             "text": el.text(),
             'selected': el.hasClass('selected')
         }).appendTo("nav select");
     });
     //$("nav select").change(function (){
     $('nav').on('change', 'select',function() {
         window.location = $(this).val();
        // window.location = $(this).find("option:selected").val();
     });
    <script type="text/javascript">
 }

（活动类用于大屏幕）。我的问题是假设加载了“项目”页面，所选的下拉项目是“转到”。我想将其更改为当前加载的页面名称。怎么可能。

我使用以下css。

nav select { display: none;}
#menu {......}
#menu li a {  color:#282826;  font-size:16px;  }
#menu li .active {    color:#3b619b;    padding-bottom:5px;border-bottom:4px solid #99a13f;    }

@media handheld, only screen and (max-width: 767px) {
  nav #menu     { display: none; }
nav select { display: inline-block; width:80%; margin-top:10px;margin-bottom:10px;margin-        left:20px;}
 }

Answer 1

工作样本：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
 <nav>
    <ul id="menu">
        <li><a href="Home" title="Home">HOME</a></li>
        <li><a href="Project" title="Project">PROJECTS</a></li>
        <li><a href="Event" title="Event">EVENTS</a></li>
     </ul>
 </nav>
  <script type="text/javascript">
 $(function () {
     $("a[title=Project]").addClass("active");

     $("<select />").appendTo("nav");
     // Create default option "Go to..."
     $("<option />", {
         "selected": "selected",
         "value": "",
         "text": "Go to..."
     }).appendTo("nav select");
     // Populate dropdown with menu items
     $("nav ul a").each(function () {
         var el = $(this)

         ,opt = {
             "value": el.attr("href"),
             "text": el.text()

         };
         if ( el.hasClass('active') ) {
            opt.selected = 'selected';
         }
         //console.log(el,el.hasClass('active'),opt);
         $("<option />", opt).appendTo("nav select");
     });
     //$("nav select").change(function (){
     $('nav').on('change', 'select',function() {
         window.location = $(this).val();
        // window.location = $(this).find("option:selected").val();
     });
     });

 </script>
</body>
</html>

Jquery Dropdownlist不显示所选项目。

1 个答案: