我想知道如何更改所有 <li>
的 CSS <ul class='dropdown-menu'>
内的标签有 <a href='' class='dropdown-toggle about-header'>
使用 JQuery?请帮助我。
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="javascript:return false" class="dropdown-toggle about-header" data-toggle="dropdown"><span class="icon-info"></span> About the Province</a>
<ul class="dropdown-menu">
<li><a href="javascript:return false" class="demographics">Demographics</a></li>
<li><a href="javascript:return false" class="other">Other Info</a></li>
<li><a href="javascript:return false" class="about">About the <span class='demonym'></span></a></li>
<li><a href="javascript:return false" class="lgu">Local Government Unit</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:return false" class="dropdown-toggle update-header" data-toggle="dropdown"><span class="icon-refresh"></span> Provincial Updates</a>
<ul class="dropdown-menu">
<li><a href="javascript:return false" class="news">News</a></li>
<li><a href="javascript:return false" class="event">Events</a></li>
</ul>
</li>
最佳答案
你想找到所有的<li>
吗? <ul class='dropdown-menu'>
内的标签有 <a href='' class='dropdown-toggle about-header'>
在它之前?
如果是这样,这将起作用:'a.about-header ~ ul.dropdown-menu li'
分解伪选择器,
-
a
= 找到一个链接 -
.about-header
= 具有“about-header”类 -
~
= 获取该元素的下一个兄弟 -
ul
但前提是它是一个无序列表 -
.dropdown-menu
= 具有“下拉菜单”类的 -
li
返回匹配元素中包含的所有列表项
$('.dropdown-toggle').click(function(){
var clas = $(this).attr('class').split(' ')[1];
$('.'+clas+' ~ ul.dropdown-menu li').toggle(); // using toggle here lets a second click on the element re-hide the `li`s
// $('.'+clas).next('.dropdown-menu').find('li').toggle(); // you could also do it this way
// $('.'+clas+' ~ ul.dropdown-menu li').`.css({ visibility : 'visible', display : 'block' });
});
ul.dropdown-menu li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
<a href="#" class="dropdown-toggle about-header" data-toggle="dropdown"><span class="icon-info"></span> About the Province</a>
<ul class="dropdown-menu">
<li><a href="#" class="demographics">Demographics</a></li>
<li><a href="#" class="other">Other Info</a></li>
<li><a href="#" class="about">About the <span class='demonym'></span></a></li>
<li><a href="#" class="lgu">Local Government Unit</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle update-header" data-toggle="dropdown"><span class="icon-refresh"></span> Provincial Updates</a>
<ul class="dropdown-menu">
<li><a href="#" class="news">News</a></li>
<li><a href="#" class="event">Events</a></li>
</ul>
</li>
关于JQuery:如何更改一组中具有特定元素的元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27874276/