隐藏手机引导导航上的菜单项

我在我的网页头部有这个nav元素:

<div id="categorymenu">
  <nav class="subnav">
    <ul class="nav-pills categorymenu container">
      <li> <a class="home" href="index.php"><span> Home</span></a></li>
      <li><a id='info' href='info.php'>Info</a>
         <div>
            <ul>
              <li><a href="info.php#step1">About it</a> </li>
              <li><a href="info.php#step2">How to</a> </li>
            </ul>
         </div>
      </li>
    </ul>
  </nav>
</div>

我想隐藏2内部<li>元素(我的菜单的子菜单)在移动设备上运行时。

我试着将这个类添加到2个<li>元素中:

...
<li><a class="dropdown hidden-xs" href="info.php#step1">About it</a> </li>
<li><a class="dropdown hidden-xs" href="info.php#step2">How to</a> </li>
...

但是在小型设备上仍然什么也没有发生:整个菜单总是可见的。

任何想法?

您尝试过媒体查询吗?http://jsfiddle.net/geargio72/0kb8ecea/

<div id="categorymenu">
  <nav class="subnav">
    <ul class="nav-pills categorymenu container">
  <li> <a class="home" href="index.php"><span> Home</span></a></li>
  <li><a id='info' href='info.php'>Info</a>
     <div>
        <ul class="rowHide">
          <li><a href="info.php#step1">About it</a> </li>
          <li><a href="info.php#step2">How to</a> </li>
        </ul>
     </div>
  </li>
</ul>
</nav>
</div>

 @media screen and (min-width: 0px) and (max-width: 765px) 
{
  .rowHide { display: none; }  
 }

看这个，它会给你一个想法…

不使用媒体查询…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- Le styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link href="style.css" rel="stylesheet" />
</head>
<body>
  <div id="categorymenu">
    <nav class="subnav">
      <ul class="nav-pills categorymenu container">
        <li> <a class="home" href="index.php"><span> Home</span></a>
        </li>
        <li><a id='info' href='info.php'>Info</a>
          <div>
            <ul>
              <li><a class="hidden-xs" href="info.php#step1">About it</a> 
              </li>
              <li><a class="hidden-xs" href="info.php#step2">How to</a> 
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </div>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
  <script src="script.js"></script>
</body>
</html>

问题是我的PHP HTML/CSS主题。有一个custom.js文件用来管理手机菜单。

我张贴了我发现的解决方案，因为我认为使用这种类型的PHP HTML/CSS主题是很常见的。

首先，我将hidden-xs类添加到锚元素:

<li><a class="hidden-xs" href="info.php#step1">About it</a></li>
<li><a class="hidden-xs" href="info.php#step2">How to</a></li>

然后我更改了主题的custom.js，在// Populate dropdown with menu items注释后的行添加了.not('.hidden-xs')

// Category Menu mobile
 $("<select />").appendTo("nav.subnav");
 // Create default option "Go to..."
  $("<option />", {
     "selected": "selected",
     "value"   : "",
     "text"    : "Go to..."
  }).appendTo("nav.subnav select");
// Populate dropdown with menu items
  $("nav.subnav a[href]").not('.hidden-xs').each(function() {
   var el = $(this);
   $("<option />", {
       "value"   : el.attr("href"),
       "text"    : el.text()
   }).appendTo("nav.subnav select");
  });
 // To make dropdown actually work
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
  $("nav.subnav select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

相关内容

最新更新

热门标签：