JQuery:如何更改一组中具有特定元素的元素的 CSS

Question

我想知道如何更改所有 <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>

Answer 1

你想找到所有的<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>