自举下拉菜单透明按钮

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>