Question

我的网页标题上有这个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>元素（菜单的子菜单）。

如上所述：Hide one item from menu on mobile我尝试将此类添加到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>
...

但小型设备上仍然没有任何结果：整个菜单始终可见。

有什么想法吗？

Answer 1

您是否尝试过媒体查询？ 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; }  
 }

Answer 2

看到它会给你一个想法......

不使用媒体查询...

＆＃13;

<!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>

＆＃13;

Answer 3

问题在于我的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，在.not('.hidden-xs')评论后的行上添加了// Populate dropdown with menu items

// 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();
  });

隐藏移动引导导航中的菜单项

3 个答案: