Question

我使用此代码关闭div onclick：

;(function ($) {
    $(function () {
        $('.m-help .m-text').hide();
        $('.m-help')
            .on('click', function (event) {
             var close = $(event.target).closest('.m-link-close-button').length;
            $(this).find('.m-text')[close ? 'hide' : 'show']();

        });

    });
    $(document).bind('m-ajax-after', function (e, selectors) {
        $('.m-help .m-text').hide();
        $('.m-help')
            .on('click', function (event) {
             var close = $(event.target).closest('.m-link-close-button').length;
            $(this).find('.m-text')[close ? 'hide' : 'show']();

        });
    });

})(jQuery);

使用此HTML：

<div class="m-help">
    <div class="m-text" style="width: 40px;">
        <?php echo $_helpHtml ?>
        <a href="#" class="m-link-close-button"><span>x</span></a>
    </div>
    <a href="#" onclick="return false;" class="details m-link"></a>
</div>

这样可以正常工作，但是当页面加载时，首先显示div，并在加载整个页面后关闭div。
为什么这个加载首先打开，整个页面加载后关闭？

如何编辑此代码，在加载页面时直接关闭div？

Answer 1

直接在div上使用css显示。你的代码应该是这样的

<div class="m-text" style="width: 40px; display:none">
    <?php echo $_helpHtml ?>
    <a href="#" class="m-link-close-button"><span>x</span></a>
</div>

Answer 2

一旦文档准备好，JavaScript就会在页面加载时执行，所以如果你依靠JS隐藏它，那么直到那时才会发生这种情况。

如果这是一个问题，请使用CSS隐藏div元素，然后在需要时使用JavaScript显示它。

Answer 3

默认使用css隐藏div。

.m-help .m-text{
display:none;
}.

当你需要显示div时，使用.addClass添加另一个类，将其命名为divShow。

.divShow{
display:block !important;
}

并在div需要关闭时删除该类

Answer 4

使用jquery onLoad或onReady事件隐藏组件，使组件等待加载整个文档。

所以不要在JS文件中使用$('.m-help .m-text').hide();，而是

在css文件中使用.m-help .m-text'{display:none}。这将默认隐藏这些组件。并在必要时使用JS显示它们

注意：不要使用display:none !important属性，否则会造成不必要的并发症。

单击jquery关闭div

4 个答案: