Question

＆＃13;

$(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');
  });
  
  
})

＆＃13;

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

＆＃13;

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

＆＃13;

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

bootstrap下拉菜单透明按钮

1 个答案: