自舉下拉菜單透明按鈕

Question

$(document).ready(function(){ 
 
    $('.dropdown > button').mousedown(function(){ 
 
    $(this).addClass('redClass'); 
 
    $('.dropdown').addClass('redClass'); 
 
    }); 
 
    
 
    $('.dropdown > button').mouseup(function(){ 
 
    $(this).removeClass('redClass'); 
 
    $('.dropdown').removeClass('redClass'); 
 
    }); 
 
    $('.dropdown > button').click(function(){ 
 
    $(this).addClass('redClass'); 
 
    $('.dropdown').addClass('redClass'); 
 
    }); 
 
    $('.dropdown > button').mouseleave(function(){ 
 
    $(this).addClass('redClass'); 
 
    $('.dropdown').addClass('redClass'); 
 
    }); 
 
    
 
    
 
})

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
.redClass { 
 
    background: transparent; 
 
    border: 1px solid transparent; 
 
} 
 

 
.transparentClass{ 
 
    background: transparent; 
 
    border: 1px solid transparent; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
             
 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">About us</a></li> 
 
     
 
    </ul> 
 
    </div> 
 
</div>

我想設計一個自舉下拉我angular2 application.I正在到issues.I想要一個下拉菜單，當用戶點擊插入符號而已。不過即使我插入符號外單擊下拉菜單shows.Another問題是，我想無論是菜單和子菜單有透明的顏色是否徘徊或clicked.I嘗試下面的CSS懸停和活躍，也沒有工作。

.dropdown > button { 
    background-color: transparent; 
} 


<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li>About us</li> 
    </ul> 
</div> 

Answer 1

我認爲沒有辦法選擇元素與父母的CSS。您可以使用jQuery來做到這一點：

$(document).ready(function(){ 
 
    $('.dropdown > button').mousedown(function(){ 
 
    $(this).addClass('redClass'); 
 
    $('.dropdown').addClass('redClass'); 
 
    }); 
 
    
 
    $('.dropdown > button').mouseup(function(){ 
 
    $(this).removeClass('redClass'); 
 
    $('.dropdown').removeClass('redClass'); 
 
    }); 
 
})

.redClass { 
 
    background: #f00; 
 
} 
 

 
.transparentClass{ 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Home 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
    <li>About us</li> 
 
    </ul> 
 
</div>