Question

我正在使用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});

        });
    });

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

有没有办法覆盖内联样式，还是应该使用不同的布局？谢谢你的帮助！

Answer 1

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

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

致：

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

更多信息的相似主题：How to override inline css through javascript?

Answer 2

试试这个：

<强> JS：

$(function () {
        $('.title-link').on('click', function () {

            $("#responsive-menu").toggleClass('myStyle');

        });
    });

<强> CSS：

.myStyle {
display: block!important;
}

或

.myStyle {
display: none!important;
}

取决于你想做什么。

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

2 个答案: