Question

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使用段落元素＆＃34; bottom＆＃34;显示。在下一次点击中，我希望它再次隐藏。

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

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

Answer 1

您可以使用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属性，不是 { {1}}，如果您希望首先隐藏它，请将元素设置为visibility。一般情况下，请尝试使用display:none而不是display。

更新按钮单击时元素的可见性

2 个答案: