Question

我正在使用bootstrap navbar，我在navbar上有2个徽标。

navbar为collapsed and not expanded时是否可以有第一个徽标，导航栏为collapsed and expanded时是否有其他徽标。我在检查元素后尝试了代码，但它没有用。

CSS：

#bs-example-navbar-collapse-1.navbar-collapse.collapse.in{
    .logo1 { display:none;}
    .logo2 {display:block;}
}

HTML：

<nav class="navbar navbar-inverse navbar-static-top header-navbar">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="Logo" href="index.php">
          <img src="logo6.jpg" class="logo1 visible-xs" />
          <img src="logo.jpg" class="logo2 hidden-xs" />
        </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        ...basic navbar code...

请帮忙。

Answer 1

纯CSS方法：

您可以使用按钮的属性来检测导航栏是否在较小的屏幕中折叠或展开。

＆＃13;

@media (max-width: 768px) {
  button[aria-expanded="true"] ~ .navbar-brand.expanded-logo {
    display: block; /* If aria-expanded is set to true, show the logo for expanded state */
  }
  button[aria-expanded="false"] ~ .navbar-brand.collapsed-logo {
    display: block; /* If aria-expanded is set to false, show the logo for collapsed state */
  }
  button[aria-expanded="true"] ~ .navbar-brand.collapsed-logo {
    display: none; /* Hide the collapsed state logo when the expanded state logo is shown */
  }
}
.expanded-logo {
  display: none; /* Show only one logo on larger screen, hide logo by default */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div data-example-id="navbar-static-top" class="bs-example bs-navbar-top-example">
  <nav class="navbar navbar-default navbar-static-top">
    <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
    <div class="container-fluid">
      <div class="navbar-header">
        <button aria-expanded="false" data-target="#bs-example-navbar-collapse-8" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand collapsed-logo">
          <img src="http://placehold.it/30x30/333">
        </a>
        <a href="#" class="navbar-brand expanded-logo">
          <img src="http://placehold.it/30x30/666">
        </a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div id="bs-example-navbar-collapse-8" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Link</a>
          </li>
          <li><a href="#">Link</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
  </nav>
</div>

＆＃13;

Answer 2

你能尝试这样的事吗？

jQuery(document).ready(function($) {
  if ($('.navbar').hasClass('in')) {
    //do something with first/second logo

  } else{
    //do something with first/second logo

  };
});

使用依赖于其他类的类将CSS应用于任何元素

2 个答案: