DEMO CHANGING CSS

Question

我想知道如何使用JQuery更改<li> <ul class='dropdown-menu'>内所有<a href='' class='dropdown-toggle about-header'>标记的CSS？请帮帮我。

<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

DEMO CHANGING CSS

您可以使用[href=].dropdown-toggle.about-header，然后找到父li并隐藏它。

$("a[href=''].dropdown-toggle.about-header").parent("li").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<li>
  <a href='' class='dropdown-toggle about-header'>hide</a>
</li>
  
<li>
  <a class='dropdown-toggle about-header'>don't hide me</a>
</li>

或来自dropdown-menu

 $(".dropdown-menu").find("a[href=''].dropdown-toggle.about-header").parent("li").hide()

完整演示

$(".dropdown-menu").find("a[href=''].dropdown-toggle.about-header").parent("li").hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='dropdown-menu'>
    <li>
      <a href='' class='dropdown-toggle about-header'>hide</a>
    </li>
      
    <li>
      <a class='dropdown-toggle about-header'>don't hide me</a>
    </li>
<ul>

Answer 2

是否要查找<li>中前面有<ul class='dropdown-menu'>的所有<a href='' class='dropdown-toggle about-header'>个标签？

如果是这样，这将有效：'a.about-header ~ ul.dropdown-menu li'

要分解伪选择器，

a =找到一个链接
.about-header =具有＆＃34; about-header＆＃34;类
~ =获取该元素的下一个兄弟
ul，但前提是它是无序列表
.dropdown-menu =有类＆＃34;下拉菜单＆＃34;
li返回匹配元素

＆＃13;

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

＆＃13;

ul.dropdown-menu li{
    display:none;
  }

＆＃13;

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

＆＃13;

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

2 个答案:

DEMO CHANGING CSS