Hidde元素在崩溃菜单引导

Question

Im从引导和下拉菜单导航栏工作，但实际上Im实现了一个箭头图像，当用户点击第一个元素时，我使用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; 
} 
}