javascript - jQuery - 点击类 - 获取其他类

Question

请在优秀的 StackOverFlow 社区的帮助下查看我之前的问题，此处:jQuery How to get element id based on what was clicked AND get child element Id

这让我想到了我当前的问题，涉及与上述帖子类似的代码。

目前，我有一组类别(部分)，单击它们时内部信息(内部部分)变得可见。然后，当再次点击时，信息会重新隐藏。

我的问题是:因为我有 5 个或更多外部部分，我怎么才能拥有它，所以当我单击其中一个部分时，它会获取其他部分的名称并关闭它们？因为就目前而言，如果我打开了一个，然后去打开另一个，两者都将保持打开状态。如果用户打开一个，我希望其他人关闭。

此外，我现在拥有代码的方式是，当一个打开时，需要在另一个部分上单击两次才能将其打开。请查看 JSFiddle。

请看这个JSFiddle对于一个工作示例，如果这令人困惑。 但我遇到了一个问题，该问题在我的代码和下面提供的代码中都存在。我只是想在单击外部部分时打开和关闭这些部分。但就目前而言，单击内部部分也会关闭该部分。我不希望这样，因为内部部分会有一些互动元素 代码:

$(document).ready(function(){
var isClicked = 0;
var whatsClicked;
$(".workSect").click(function() {
    isClicked++;
    whatsClicked = $(this).find(".innerSect")
    //alert(isClicked);
    clickerCheck();
});
function clickerCheck() {
    if(isClicked == 1){
        whatsClicked.first().css({'visibility' : 'visible', 'display' : 'inline'});
        //alert(isClicked);
    }
    else if(isClicked >= 2){
        whatsClicked.first().css({'visibility' : 'hidden', 'display' : 'none'});
        isClicked = 0;
    }
    else {
        whatsClicked.first().css({'visibility' : 'hidden', 'display' : 'none'});
        isClicked = 0;      
        }
}

});

https://jsfiddle.net/5k46e4sr/3/

Answer 1

您不必使用计数器，只需检查 visibility

$(document).ready(function() {
  var $inners = $('.workSect .innerSect');
  $(".workSect").click(function() {
    var $inner = $(this).find('.innerSect'),
      visible = $inner.is(':visible');
    $inner.css({
      'visibility': visible ? 'hidden' : 'visible',
      'display': visible ? 'none' : 'block'
    });
    $inners.not($inner).hide();
  });
});

#workPort {
  width: 100%;
  display: block;
  float: left;
  text-align: left;
}
.workSect {
  float: left;
  display: block;
}
.workSect h2 {
  display: inline;
  cursor: pointer;
}
.arrowImg {
  display: inline;
  cursor: pointer;
}
.innerSect {
  visibility: hidden;
  display: none;
}
.innerSectVis {
  visibility: visible;
}
#innerSectLogo {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article id="workPort">
  <section class="fluid workSect" id="outerSectLogo">
    <h2>Logo - Business Card Design</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectCovers">
    <h2>Publication Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectCovers">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBook">
    <h2>Book Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBook">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectAd">
    <h2>Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectAd">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBanner">
    <h2>Banner Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBanner">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectMotion">
    <h2>Motion Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectOther">
    <h2>Other Designs</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectOther">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
</article>

---

如果不想设置可见性规则可以简化

$(document).ready(function() {
  var $inners = $('.workSect .innerSect');
  $(".workSect").click(function() {
    var $inner = $(this).find('.innerSect').toggle();
    $inners.not($inner).hide();
  });
});

#workPort {
  width: 100%;
  display: block;
  float: left;
  text-align: left;
}
.workSect {
  float: left;
  display: block;
}
.workSect h2 {
  display: inline;
  cursor: pointer;
}
.arrowImg {
  display: inline;
  cursor: pointer;
}
.innerSect {
  display: none;
}
.innerSectVis {
  visibility: visible;
}
#innerSectLogo {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article id="workPort">
  <section class="fluid workSect" id="outerSectLogo">
    <h2>Logo - Business Card Design</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectCovers">
    <h2>Publication Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectCovers">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBook">
    <h2>Book Covers</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBook">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectAd">
    <h2>Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectAd">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectBanner">
    <h2>Banner Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectBanner">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectMotion">
    <h2>Motion Advertisements</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectLogo">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
  <section class="fluid workSect" id="outerSectOther">
    <h2>Other Designs</h2>
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" />
    <hr/>
    <section class="fluid innerSect" id="innerSectOther">
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
      <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p>
    </section>
  </section>
</article>