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

Question

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

3

我正在使用 bootstrap 的 navbar，在 navbar 上有两个标志。

是否可能在 navbar 折叠和未展开时显示第一个标志，而在 navbar 折叠和展开时显示其他标志。我已经尝试了检查元素后的代码，但它没有起作用。

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...

请帮忙。

- Syed Talha Hai

通过使用“媒体查询”，是可以实现的。 - vivekkupadhyay

你能指导我怎么做吗？代码？ :) - Syed Talha Hai

2

SO不是一个代码编写服务。我建议你先做好研究，如果你自己的尝试无法工作，再提出问题。 - Paulie_D

使用JavaScript是一个选项吗？ - Subash

是的，任何选项，我只想做这个。 - Syed Talha Hai

嗯，我在考虑一种仅使用CSS的方法。让我试试看是否可行。 - m4n0

2个回答

0

你可以试试这样做吗？

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

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

  };
});

- Shina

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- m4n0 · Accepted Answer

纯CSS方法：

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

@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 */
}

<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>