Question

我正在使用导航和下拉列表中的导航栏但实际上当用户点击第一个元素时我实现了箭头图像，我使用css放置图像但是如果我按下导航栏即使我按下下拉列表时箭头也会出现

您建议我在手机中隐藏箭头？

我的代码：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

我的Css：

a[aria-expanded="true"]{
background-image: url("http://www.russianmachineneverbreaks.com/wp-content/themes/nebula/images/arrow_up_24x24.png");
background-repeat: no-repeat;
background-position: bottom;
}

小提琴是here

Answer 1

试试这个

a[aria-expanded="true"]::after{
  content:"";
  display:inline-block;
  height: 17px;
  width: 30px;
  float: right;
  margin-left:5px;
    background-image: url("http://www.russianmachineneverbreaks.com/wp-content/themes/nebula/images/arrow_up_24x24.png");
background-repeat: no-repeat;
background-position: bottom;
}
@media (max-width:768px){
  a[aria-expanded="true"]::after{
    display:none;
  }
}

jsfiddle.net/dxnemmrd/4/

Answer 2

你也可以试试这个

BOOTPLY

@media (min-width: 768px) {
  a[aria-expanded="true"]{
background-image: url("http://www.russianmachineneverbreaks.com/wp-content/themes/nebula/images/arrow_up_24x24.png");
background-repeat: no-repeat;
background-position: bottom;
}
}

折叠菜单引导程序中的Hidde元素

2 个答案: