基础6:单击链接时隐藏顶部栏

Foundation 6: Hide the Top Bar when link is clicked

本文关键字：隐藏 顶部 链接 单击 基础      更新时间：2023-09-26

我正在使用Foundation 6作为单页网站。我正在使用顶部栏将用户带到网站的不同部分。因此，在移动设备上访问网站时，当我单击折叠顶部栏中的链接时，我希望顶部栏在将用户带到网站的某个部分后隐藏。

这是我的 HTML：

<div data-sticky-container>
   <div data-sticky data-sticky-on="small" data-options="marginTop:0.9;" style="width: 100%">
     <div class="top-bar">
      <div class="top-bar-title">
        <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
          <span class="menu-icon dark" data-toggle></span>
        </span>
      </div>
      <div id="responsive-menu">
        <div class="top-bar-section">
            <ul class="menu" data-magellan>
                <li class="title"><a class="title-link" href="#home">HOME</a></li>
                <li class="title"><a class="title-link" href="#events">EVENTS</a></li>
                <li class="title"><a class="title-link" href="#about">ABOUT</a></li>
            </ul>
        </div>
      </div>
    </div>
   </div>
</div>

我本可以通过使用它来实现此功能(我认为(：

$(function () {
        $('.title-link').on('click', function () {
            $("#responsive-menu").css({display: none});
        });
    });

但是问题是当我单击菜单图标，基金会添加和display: block;的内联样式时，我似乎无法将其更改为JS。

有没有办法覆盖内联样式，或者我应该使用不同的布局？感谢您的帮助！

.css()覆盖内联样式。只需更改此行： 

$("#responsive-menu").css({display: none});

自：

$("#responsive-menu").css({"display": "none"});

类似主题更多信息： 如何通过javascript覆盖内联css？

试试这个：

.JS： 

$(function () {
        $('.title-link').on('click', function () {
            $("#responsive-menu").toggleClass('myStyle');
        });
    });

.CSS：

.myStyle {
display: block!important;
}

或

.myStyle {
display: none!important;
}

取决于你想做什么。

相关文章：