Question

选中此fiddle

我有一个dropdown，当切换dropdown时，我想更改另一个div's背景颜色（div's，其中包含.main-content类和{ {1}}就是这种情况。）

我已尝试过这些选择器.reqdiv，~，>，我知道这些选择器在我的案例中不起作用。任何人都可以建议我如何在不使用JS / JQuery的情况下解决这个问题。

＆＃13;

.main-content {
  height: 200px;
  width: 100%;
  background: green;
}

.dropdown-menu {
  top: 35px!important;
}

.nav-btn.show~.main-content {
  background: blue;
}

.nav-btn.show>.main-content {
  background: blue;
}

.nav-btn.show+.main-content {
  background: blue;
}

＆＃13;

Answer 1

你想要下拉选择然后改变div中的背景颜色

<select id="evt_color"> 
<option value="#3366CC">Blue</option> 
<option value="#E070D6">Fuchsia</option> 
<option value="#808080">Gray</option> 
<option value="#4bb64f">Green</option> 
<option value="#ed9d2b">Orange</option> 
<option value="#FF9CB3">Pink</option> 
<option value="#EA4A4A">Red</option> 
</select>
<div id="someDiv">Colour sample</div> 


 **Script**
$("#evt_color").change(function() {
    $("#someDiv").css("background-color", $(this).val());
}).change();

Example

Answer 2

你可以简单地使用指定的css类来改变背景。 toggleClass可以帮助您点击。

$( "#button" ).on( "click", function() {
    $( ".main-content").toggleClass('blue');
});

.main-content{
    height:200px;
    width:100%;
    background:green;
}
.blue{background: blue}
.dropdown-menu{top:35px!important;}
.nav-btn.show ~ .main-content{background:blue;} 
.nav-btn.show > .main-content{background:blue;} 
.nav-btn.show + .main-content{background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="nav-btn">
   <button class="btn dropdown-toggle " id="button" type="button" data-toggle="dropdown"><b>Language</b>
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JavaScript</a>
      </li>
   </ul>
</div>
</div>
<div class="#reqdiv">
   //text
</div>
<div class="main-content">
</div>

Answer 3

如果你想只使用css你必须改变你的HTML。因此，背景颜色更改元素将是.nav-btn元素的兄弟。 e.g：

＆＃13;

.main-content{
    height:200px;
    width:100%;
    background:green;
}
.dropdown-menu{top:35px!important;}
.nav-btn.show ~ .main-content{background:blue;} 
.nav-btn.show > .main-content{background:blue;} 
.nav-btn.show + .main-content{background:blue;}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-btn">
   <button class="btn dropdown-toggle " id="button" type="button" data-toggle="dropdown"><b>Language</b>
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JavaScript</a>
      </li>
   </ul>
</div>
<div class="#reqdiv">
   //text
</div>
<div class="main-content">
</div>

＆＃13;

下拉列表中的Bootstrap4显示更改另一个父级div属性（CSS）

3 个答案: