更新知名度点击

HTML：更新知名度点击

 <div class ="container"> 
      <div class="ui top attached segment"> 
       <div class="item"> 
        <p>Post here</p> 
       </div> 
       </br> 
       <div class="item"> 
        <div class="extra"> 
         <div class="ui right floated button"> 
          <i class="download icon"></i> 
         </div> 
         <div class="ui right floated button quickstats"> 
          <i class="pie chart icon"></i> 
         </div> 
        </div> 
       </div> 
       <div class="ui label"> 
        <i class="time icon"></i> 
        timeStamp 
       </div> 
       </br> 
      </div> 
      <div class="ui bottom attached block secondary clearing segment hidden"> 
       <p>bottom</p> 
      </div> 
     </div>

的Javascript：

$('.quickstats').on('click', function(){ 
    var statBar = $(this).closest('.extra').closest('.item').closest('.segment').closest('container').find('.stats'); 
    if (statBar.hasClass('hidden')){ 
     statBar.removeClass('hidden') 
     statBar.addClass('visible'); 
    } else { 
     statBar.removeClass('visible') 
     statBar.addClass('hidden'); 
    } 
})

当我点击与类quickstats按钮，我想在与段落元素底部的DIV说“底部”显示。在下一次点击时，我想让它再次隐藏起来。

我会一次在屏幕上显示多个HTML元素，所以我不能直接选择元素，但必须使用父，子和兄弟关系的组合。我已经尝试了jQuery的当前方法，但没有成功。

点击class quickstats的div，如何选择带有隐藏类的div，然后来回切换可见性？

来源

2017-04-23 Siunami

首先你忘了添加统计类，见我加入它下面

<div class="stats ui bottom attached block secondary clearing segment hidden"> 
    <p>bottom</p> 
</div>

第二你不需要链得到顶端元素与容器类...你可以做这样的下面...... 最接近功能会发现它的元素的方式，你正在寻找...

var statBar = $(this).closest('.container').find(".stats");

所以基本上只是这2个小更改...添加统计信息类要隐藏和显示并摆脱链接的元素...

来源

2017-04-23 09:34:49

而不是你的整个if声明，你可以使用statBar.toggle();这将使它隐藏，如果它是可见的或可见它是隐藏的。

如果您希望使用切换幻灯片动画，您可以使用始终较冷的statBar.slideToggle();。

概括起来在自己的代码：

$('.quickstats').on('click', function(){ 
    $(this).closest('.extra').closest('.item').closest('.segment').closest('container').find('.stats'); 
    statBar.toggle(); 
});

重要：不要忘记改变你的CSS的hidden类 - 因为jQuery的原理上display财产，不visibility，所以如果你想让它隐藏起来，请将元素设置为display:none。一般来说，请尝试使用display而不是visibility。

更新知名度点击

回答

相关问题