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