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

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');   
    }
})

当我单击带有 class quickstats 的按钮时，我希望显示底部的 div 以及显示 "bottom" 的段落元素。下次点击时，我希望它再次隐藏。

我将在屏幕上同时显示多个 HTML 元素，因此我不能直接 select 元素，而必须结合使用父子关系和兄弟关系。我已经为 jquery 尝试了当前的方法，但没有成功。

单击带有 class quickstats 的 div，我怎样才能 select 带有隐藏 class 的 div 然后切换可见性向前？

Answer 1

您可以只使用 statBar.toggle(); 而不是整个 if 语句，这将使它在可见或可见时隐藏。

如果你想要切换幻灯片动画，你可以使用 statBar.slideToggle();，它总是更酷。

用你自己的代码总结一下：

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

重要：不要忘记更改 CSS 中的 hidden class - 因为 JQuery 适用于display 属性，不是 visibility，所以如果你想首先隐藏它，请将元素设置为 display:none。一般来说，尝试使用 display 而不是 visibility.

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

Update visibility of an element on button click

html

javascript

jquery

semantic-ui