html - 引导下拉菜单透明按钮

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 应用程序设计一个引导下拉菜单。我遇到了问题。当用户只单击插入符号时，我想要一个下拉菜单。但即使我在插入符号外单击，下拉菜单也会显示。另一个问题是我希望菜单和子菜单无论是悬停还是单击都具有透明颜色。我尝试了下面的悬停和事件 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>