Question

我正在使用bootstrap 3反向导航栏。单击切换按钮时，我想删除现有的背景图像（因为这与切换布局冲突）。但是，我希望在切换切换时恢复背景图像。

这是当前的HTML和CSS;

    <div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" onclick="menuclick()">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
.navbar-inverse .navbar-nav > li > a {
    color: white;
}

a:hover {
    background-color: black;
}


.navbar.navbar-inverse {
    background: url('../images/banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1% 0 1% 0;
}

我试过使用以下方法： Onlclick - ＆gt;找到当前的背景样式。如果style = image，请删除样式否则添加图像

我尝试过以下Javascript尝试访问navbar background-image，但似乎样式节点中的背景节点为空：

function menuclick() {
    var nav = document.getElementById('navbar');
}

如果您有任何想法可以实现，请告诉我

Answer 1

Bootstrap 3 collapse类暴露了一些事件以挂钩崩溃功能。

show.bs.collapse --> fires immediately when the show instance method is called.
shown.bs.collapse --> fires when a collapse element has been made visible to     the user (CSS transitions to completes before execution).
hide.bs.collapse --> fires immediately when the hide method has been called. 
hidden.bs.collapse --> fires when a collapse element has been hidden from the user (CSS transitions to complete  before execution).

实施例

$('#navbar').on('hidden.bs.collapse', function () {
  // restore the existing background image
});


$('#navbar').on('shown.bs.collapse', function () {
      // remove the existing background image
});

Answer 2

您应该使用类来添加/删除样式。换句话说，当您单击切换按钮时，您可以在nav元素上切换类。

以下是概念证明：

View Fiddle

<nav>
  <button>Menu</button>
</nav>

$(document).ready(function() {
    $('button').on('click',function() {
    $('nav').toggleClass('navbar-inverse');
  });
});

现在，听起来你想要在导航栏关闭时删除该反向类，这可能不涉及另一个按钮点击。因此，单击菜单按钮时，您不仅可以依赖此切换。您还需要检测导航栏何时关闭，并相应地删除反向类。

您应该能够利用Bootstrap为导航栏功能添加/删除的类来添加/删除您想要的样式。

Answer 3

对于当前设置的图像，您可以使用 $('#navbar').css('background-image')获取当前设置的图像，或者您可以传入第二个参数来更新当前的background-image样式。

此外，我建议按照Yasir的建议去做崩溃事件。

此处为您的代码提供了jsfiddle。

如何在菜单切换上更改导航样式单击

3 个答案: