1
私はドロップダウンリストを持っています。私がしたいのは、サブメニューのリンクをクリックすると、リンクがアクティブなときに親ボタンの色を変更したままにしておきたいということです。 コードへのリンクです。ここhttps://jsfiddle.net/v28ydshL/子要素が訪問/アクティブになったときに親要素の色を変更する方法
<nav>
<div class="navbar-header">
<button style="background-color: #3382d5;" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menubar">
<span style="background-color: white;" class="icon-bar"></span>
<span style="background-color: white;" class="icon-bar"></span>
<span style="background-color: white;" class="icon-bar"></span>
</button>
</div>
<div id="menubar" class=" collapse navbar-collapse row">
<ul id="dropdownNavbar" class="nav navbar-nav">
<li class="dropdown">
<button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-time"></span> Time Card
<span class="caret"></span></button>
<div class="dropdown-content">
<a id="showTimeCard" href="#">My Time Card</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-stats"></span> Project
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-user"></span> HR Links
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-screenshot"></span> Leave Tracker
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-briefcase"></span> Accounts
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-headphones"></span> Service Desk
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-file"></span> Reports
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn dropbtn">
<span class="glyphicon glyphicon-cog"></span> Settings
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</div>
</nav>
あなたはブートストラップを使用しているので、私のCSS
ul {
list-style-type: none;
padding-left: 1px;
}
.dropdown {
float: left;
padding-right:1px;
}
.dropbtn{
background-color: #060975;
height:30px;
border-radius: 0px 10px;
}
li button, .dropbtn {
display: inline-block;
background-color:#3382d5;
color: white;
text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
background-color: #31b0d5;
}
button.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e8f3f4;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
z-index: 10;
}
.navbar-header{
overflow: visible;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8dee2
}
.dropdown-content a:visited .dropbtn{
background-color: #e8f3f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
#menubar{
padding-top: 5px;
overflow: visible;
z-index: 10;
padding-left:0px;
padding-right: 0px;
margin: 0px;
}
#dropdownNavbar{
margin: 0px;
}
あなたのサブメニューリンクを押すと、別のページに移動しますか？そうであれば、あなたのページに応じて親を強調表示する必要があります。 –
@JensAleniusページをリロードする予定はありません。 –
'css'に'親セレクタ 'はありません。' js'で試してみてください。 –