分别针对每个设计资料中心

Question

当点击标题时，我试图切换一个div。我想出了这个

$( '.industrial-product' ).find('.show-features').click(function() {
    $('.industrial-product').find('.ip-features').toggle();
});

使用标记

<div class="industrial-product">
<a href="#" class="show-features"><h3>Title</h3></a>
<div class="ip-features">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi ex iste deleniti soluta esse recusandae eveniet deserunt animi, officia suscipit voluptatibus temporibus excepturi nemo quaerat eius sequi aut unde.
</div>

​

这基本上是我想要的，在点击标题时显示ip特性div，但这会显示/隐藏页面上的所有内容。我有8个产品，都需要单独切换。任何帮助都将不胜感激。

Answer 1

这应该很容易做到。如果我明白的话，你只想显示并隐藏被点击的那个。您需要使用$(this)作为目标，因为它是标题的同级，转到它的父级，然后找到标题。

试试这个：

HTML

<div class="industrial-product">
     <a href="#" class="show-features"><h3>Title</h3></a>
     <div class="ip-features">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi ex iste deleniti soluta esse recusandae eveniet deserunt animi, officia suscipit voluptatibus temporibus excepturi nemo quaerat eius sequi aut unde.
     </div>
</div>

JS

$( '.industrial-product' ).find('.show-features').click(function() {
    $(this).parent().find('.ip-features').toggle();
});

Answer 2

试试这个：

$( '.industrial-product' ).each(function(){
  var $root = $(this);
  var $ip = $root.find('.ip-features');

  $root.find('.show-features').click(function() {
    $ip.toggle();
  });
});

Answer 3

请确保引用发生单击的位置的上下文，找到要隐藏的正确的.ip-features div：

$( '.industrial-product' ).find('.show-features').click(function() {
    $(this).parent('.industrial-product').find('.ip-features').toggle();
});