Question

我需要帮助 CLOSING 移动版网站中的导航栏。当我在导航栏中选择项目时：它保持打开状态，它不会自动关闭，所以我需要再次点击菜单关闭

这是我的HTML：

<div id="mobile-box">
        <a class="mobile" href="#">MENU</a>
    </div>
    <div class="menu-menu">
        <div class="sidebar1 col-sm-2 col-md-2 col-lg-1 col-xs-12" ng-if="authentication.isAuth" ng-cloak>
            <ul id="nav" ng-cloak>
                <li ng-if="IsUser()"><a ui-sref="dashboard">Dashboard</a></li>
                <li ng-if="IsAdmin()"><a ui-sref="item">Item</a></li>
            </ul>
        </div>
    </div>

这是我的jQuery

$(document).ready(function() {
    $("a.mobile").click(function() {
        $(".sidebar1").slideToggle('fast');
    });
    window.onresize = function(event) {
        if($(window).width() >880) {
            $(".sidebar1").show();
        }
        else {
            $(".sidebar1").hide();
        }
    }; 
});

编辑：添加了Angular-js标记以进行提问。

Answer 1

为什么你没有使用自举导航栏？

您可以参考http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h作为参考。

Answer 2

您甚至可以使用hover()代替click()。它就像魅力一样。

$("a.mobile").hover(function() {
    $(".sidebar1").slideToggle('fast');
});

Answer 3

我想你需要这样的。试试这个JsFiddle

$(document).ready(function() {
  $("a.mobile, .menu-item").click(function() {
    $(".sidebar1").slideToggle('fast');
  });
  window.onresize = function(event) {
    if ($(window).width() > 880) {
      $(".sidebar1").show();
    } else {
      $(".sidebar1").hide();
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mobile-box">
  <a class="mobile" href="#">MENU</a>
</div>
<div class="menu-menu">
  <div class="sidebar1 col-sm-2 col-md-2 col-lg-1 col-xs-12" ng- if="authentication.isAuth" ng-cloak>
    <ul id="nav" ng-cloak>
      <li ng-if="IsUser()"><a class="menu-item" ui-sref="dashboard">Dashboard</a>
      </li>
      <li ng-if="IsAdmin()"><a class="menu-item" ui-sref="item">Item</a>
      </li>
    </ul>
  </div>
</div>

单击后折叠导航栏保持打开状态

3 个答案: