jQuery只切换一个元素，而不是所有元素

jQuery toggle only one element instead of all

本文关键字：元素 一个 jQuery      更新时间：2023-09-26

我有代码，使用jQuery滑动切换显示和隐藏特定的列表。我想点击一个加/减按钮来执行事件。但每次我尝试使用a.minuslink或a > img或.minusimg -我不能得到任何选择器工作，除了ul。有人能帮帮我吗?谢谢!

我的HTML

: 

		$("#xmlDiv").on("click", "ul", function(e) {
		  var clickedUl = $(this);
		  //alert(this);
		  clickedUl.children().find(".mainlist").slideToggle('slow', function() {
		    var img = clickedUl.find('span.minus img');
		    if (img.attr('src') === 'images/plus.png')
		      img.attr('src', "images/minus.png");
		    else
		      img.attr('src', "images/plus.png");
		  });
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xmlDiv">
  <ul class="section">
    <li class="root">
      <div class="minus">
        <a href="#" class="minuslink">
          <img src="images/minus.png" class="minusimg">  
        </a>
      </div>Antivirus Compliance - <a href="../xml/xml/1 - Sample AV.xml">Download</a>
      <ul class="mainlist" style="margin-left: -25px; display: block;">
        <li class="desc"> <span style="color:#e4e4e4;">-</span>  <span class="desc_span" tooltip="Antivirus is not installed.">AV Not Installed</span>
        </li>
        <li class="desc"> <span style="color:#e4e4e4;">-</span>  <span class="desc_span" tooltip="Antivirus is not running.">AV Not Running</span>
        </li>
        <li class="desc"> <span style="color:#e4e4e4;">-</span>  <span class="desc_span" tooltip="Antivirus is not updated.">AV Not Updated</span>
        </li>
        <li class="desc"> <span style="color:#e4e4e4;">-</span>  <span class="desc_span" tooltip="">Compliant</span>
        </li>
      </ul>
    </li>
  </ul>

我的JQUERY: 

$("#xmlDiv").on("click", "ul", function(e) {
    var clickedUl = $(this);
    //alert(this);
    clickedUl.children().find(".mainlist").slideToggle('slow', function () {
        var img = clickedUl.find('span.minus img');
        if(img.attr('src') === 'images/plus.png')
            img.attr('src', "images/minus.png");
        else
            img.attr('src', "images/plus.png");
    });
});

如果我正确理解你的问题，问题很可能是从链接到.mainlist的遍历。一种方法是:$this.parent().siblings('.mainlist') 

$("#xmlDiv div.minus").click( function(e) {
    var $this = $(this);
    $this.siblings('.mainlist').slideToggle('slow', function() {
        var img = $this.find('img');
        if (img.attr('src') === 'images/plus.png')
            img.attr('src', "images/minus.png");
        else
            img.attr('src', "images/plus.png");
    });
});

小提琴

edit:修改点击以附加到'。减去'div，基本相同，但不需要parent()

相关文章：