Question

我有一些折叠/可折叠的块，其中第一个块打开，第二个/第三个块关闭。它们在打开和关闭方面按照我想要的方式工作，但是我无法理解如何更改功能，以便正确的块的正负图标发生变化。目前，无论我打开或关闭哪个街区，所有房屋都会同时发生变化。

如何更改功能以使切换块更新正确的图标？

function toggleDiv(divId) {
$("#"+divId).toggle();
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}

HTML

<p><a href="javascript:toggleDiv('features');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></a></p>
<div id="features">
    Features 
</div>

<p><a href="javascript:toggleDiv('specifications');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></a></p>
<div id="specifications">
    Spec 
</div>

<p><a href="javascript:toggleDiv('faq');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></a></p>
<div id="faq">
    FAQ 
</div>

Answer 1

让我先说不......只是不！

将标记中的目标添加为数据属性：

<div class="product-toggle" data-target="features">
  <p>
    <span class="icon icon-plus" aria-hidden="true"></span>
    <span class="toggle-title">Features</span>
  </p>
</div>
<div id="features">
    Features 
</div>

将监听器附加到product-toggle类，如下所示：

$(document).on('click', '.product-toggle', function() {
  var target = this.dataset.target;
  $('#'+target).toggle();
  $(this).find('span.icon').toggleClass('icon-plus icon-minus');
});

JsFiddle

Answer 2

注意：不鼓励内联事件;你应该使用jQuery点击处理程序，因为你已经在使用jQuery。

例如（ Demo ）：

$('a.product-toggle').click(function(e){
    $(this).closest('p').next('div').toggle();
    $(this).find('span.icon').toggleClass('icon-plus icon-minus')
})

如果您需要使用内联事件调用，

您需要更改第二行以获取当前元素的图标

function toggleDiv(divId) {
    $("#"+divId).toggle();
    $("#"+divId).prev('p').find('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}

，因为

$('.product-toggle span.icon')

选择所有<div>s

或通过点击事件传递this。

<p><a href="javascript:toggleDiv('features',this);"...

和

function toggleDiv(divId,currEl) {
    $("#"+divId).toggle();
    $(currEl).find('span.icon').toggleClass('icon-plus icon-minus')
}

Answer 3

这是我想出的一个更方便的解决方案，并且没有在href中使用javascript。

$('.product-toggle').on('click', function(evt){
    // This will be set to the context of the current element
    $("#"+this.name).toggle();
    $(this).find('.icon').toggleClass('icon-plus icon-minus');
});

这要求您为a标签指定名称，而不是直接调用该函数。以下是小提琴的链接：http://jsfiddle.net/ttpfzrgL/

Answer 4

试试这个

   function toggleDiv(divId) {
      var idSelector = "#"+divId;
      $(idSelector).toggle();  
      $('p').has('idSelector').closest('span.icon').toggleClass('icon-plus icon-minus');
   }

快乐编码：）

单击事件切换所有类而不是正确的块

4 个答案: