ToggleShow元素只在这个特定的div中点击显示

时间：2017-02-01 18:11:42

标签： javascript jquery html css

我有动态内容，加载时会隐藏某些div。在按钮上单击此特定div中的某些元素应该显示为可见。

我现在尝试了以下内容：

$(document).ready(function(){
    $(".hide").hide();
    $('.toggle').click(function(){
        $(this).next().slideToggle();
    });
});

但这背后的逻辑是这样的：

$(document).ready(function(){
    $(".hide").hide();
    $('.toggle').click(function(){
        $(this).next('.hide').slideToggle();
    });
});

这是JSFiddle：https://jsfiddle.net/jvt7r5qv/1/

如何改进？

3 个答案:

答案 0 :(得分：1)

$.next()找到DOM中与（可选）选择器内部匹配的下一个元素。因此$.next('.hide')与.toggle之后的下一个元素不是.hide - .hide嵌套在下一个元素中，因此.hide不匹配。因此，要查找.toggle，请定位$.find()之后的下一个元素，然后使用.hide定位嵌套的$(document).ready(function(){ $(".hide").hide(); $('.toggle').click(function(){ $(this).next().find('.hide').slideToggle(); }); });元素。

.flexing {
  display:flex;
}
.flex {
  flex:1;
}
body {
  padding:80px;
}
.publications p, .publications h3 {
	color:#393939;
}
.publication {
	border-top:1px solid #393939;
	padding:50px 0 100px 0;
  position:relative;
}
.publication:last-of-type {
	border-bottom:1px solid #393939;
	margin-bottom:100px;
}
.pub-col2 {
	position:relative;
}
.ion-ios-close-empty {
    font-size: 4em;
    position: absolute;
    right: 6px;
    top: 0;
}
.hide {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="publications">
  <div class="publication flexing">
    <span class="ion-ios-close-empty toggle">X</span>
    <div class="pub-col flex">
      <h3>SDB is prevalent in U.S. Latinos  but rarely associated with a  clinical diagnosis</h3>
      <div class="hide">
        <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A,</p>
        <p>et al… (2014). Sleep-disordered breathing in hispanic/latino individuals</p>
        <p>of diverse backgrounds: the hispanic community health study/study
          <br> of latinos. American Journal of Respiratory and Critical Care
          <br> Medicine, 189 (3), 335–344.</p>
      </div>
    </div>
    <div class="pub-col2 flex">
      <div class="hide">
        <h3>Summary</h3>
        <p>The correlations between the ARES and PSG for simultaneously
          <br> acquired recordings was 0.96 using an apnea/hypopnea index
          <br> with a 4% desaturation (AHI-4%), and 0.93 using a respiratory
          <br> disturbance index based on Chicago criteria (RDI). The diagnostic
          <br> sensitivity of in-lab ARES RDI was 0.95 and the specificity was
          <br> 0.94; comparable measures to PSG for the in-home ARES RDI
          <br> values were 0.85 and 0.91.</p>
        <p><a href="http://#">PDF Link</a></p>
      </div>
    </div>
  </div>
  <div class="publication flexing">
    <span class="ion-ios-close-empty toggle">X</span>
    <div class="pub-col flex">
      <h3>Sleep-disordered breathing in  hispanic/latino individuals of  diverse backgrounds</h3>
      <div class="hide">
        <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A,
          <br> et al… (2014). Sleep-disordered breathing in hispanic/latino individuals
          <br> of diverse backgrounds: the hispanic community health study/study
          <br> of latinos. American Journal of Respiratory and Critical Care
          <br> Medicine, 189 (3), 335–344.</p>
      </div>
    </div>
    <div class="pub-col2 flex">
      <div class="hide">
        <h3>Summary</h3>
        <p>The correlations between the ARES and PSG for simultaneously
          <br> acquired recordings was 0.96 using an apnea/hypopnea index
          <br> with a 4% desaturation (AHI-4%), and 0.93 using a respiratory
          <br> disturbance index based on Chicago criteria (RDI). The diagnostic
          <br> sensitivity of in-lab ARES RDI was 0.95 and the specificity was
          <br> 0.94; comparable measures to PSG for the in-home ARES RDI
          <br> values were 0.85 and 0.91.</p>
        <p><a href="#" target="_blank">PDF link</a></p>
      </div>
    </div>
  </div>
</div>
<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>

答案 1 :(得分：1)

问题是.toggle元素不是具有.hide元素的兄弟元素。正如文档所述，.next() method将选择紧随其后的兄弟元素。

如果要选择包含.pub-col元素的下一个相邻.hide元素，则可以使用.nextAll() method（可选择与选择器匹配的任何后续兄弟），然后链接.first()方法，因为.nextAll()返回一个集合。从那里，您可以使用.hide()方法找到.find()后代元素，然后移除.hide类并显示元素。

$(".hide").hide();
$('.toggle').click(function() {
  $(this).nextAll(':has(.hide)')
    .first()
    .find('.hide')
    .removeClass('hide')
    .slideToggle();
});
.flexing {
  display: flex;
}
.flex {
  flex: 1;
}
body {
  padding: 80px;
}
.publications p,
.publications h3 {
  color: #393939;
}
.publication {
  border-top: 1px solid #393939;
  padding: 50px 0 100px 0;
  position: relative;
}
.publication:last-of-type {
  border-bottom: 1px solid #393939;
  margin-bottom: 100px;
}
.pub-col2 {
  position: relative;
}
.ion-ios-close-empty {
  font-size: 4em;
  position: absolute;
  right: 6px;
  top: 0;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="publications">
  <div class="publication flexing">
    <span class="ion-ios-close-empty toggle">X</span>
    <div class="pub-col flex">
      <h3>SDB is prevalent in U.S. Latinos  but rarely associated with a  clinical diagnosis</h3>
      <div class="hide">
        <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A,</p>
        <p>et al… (2014). Sleep-disordered breathing in hispanic/latino individuals</p>
        <p>of diverse backgrounds: the hispanic community health study/study
          <br>of latinos. American Journal of Respiratory and Critical Care
          <br>Medicine, 189 (3), 335–344.</p>
      </div>
    </div>
    <div class="pub-col2 flex">
      <div class="hide">
        <h3>Summary</h3>
        <p>The correlations between the ARES and PSG for simultaneously
          <br>acquired recordings was 0.96 using an apnea/hypopnea index
          <br>with a 4% desaturation (AHI-4%), and 0.93 using a respiratory
          <br>disturbance index based on Chicago criteria (RDI). The diagnostic
          <br>sensitivity of in-lab ARES RDI was 0.95 and the specificity was
          <br>0.94; comparable measures to PSG for the in-home ARES RDI
          <br>values were 0.85 and 0.91.</p>
        <p><a href="http://#">PDF Link</a>
        </p>
      </div>
    </div>
  </div>
  <div class="publication flexing">
    <span class="ion-ios-close-empty toggle">X</span>
    <div class="pub-col flex">
      <h3>Sleep-disordered breathing in  hispanic/latino individuals of  diverse backgrounds</h3>
      <div class="hide">
        <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A,
          <br>et al… (2014). Sleep-disordered breathing in hispanic/latino individuals
          <br>of diverse backgrounds: the hispanic community health study/study
          <br>of latinos. American Journal of Respiratory and Critical Care
          <br>Medicine, 189 (3), 335–344.</p>
      </div>
    </div>
    <div class="pub-col2 flex">
      <div class="hide">
        <h3>Summary</h3>
        <p>The correlations between the ARES and PSG for simultaneously
          <br>acquired recordings was 0.96 using an apnea/hypopnea index
          <br>with a 4% desaturation (AHI-4%), and 0.93 using a respiratory
          <br>disturbance index based on Chicago criteria (RDI). The diagnostic
          <br>sensitivity of in-lab ARES RDI was 0.95 and the specificity was
          <br>0.94; comparable measures to PSG for the in-home ARES RDI
          <br>values were 0.85 and 0.91.</p>
        <p><a href="#" target="_blank">PDF link</a>
        </p>
      </div>
    </div>
  </div>
</div>

这样，点击多次点击功能就可以了。

Updated Example 

$(".hide").hide();
$('.toggle').click(function() {
  $(this).nextAll(':has(.hide)')
         .first()
         .find('.hide')
         .removeClass('hide')
         .slideToggle();
});

答案 2 :(得分：0)

先生，您正在寻找类似的东西 toggle class of .closest() 这是我最喜欢的答案 http://jsfiddle.net/6whzQ/ 

el.closest('class').toggleClass('class')
相关问题
最新问题