找到你要的答案

Q:Close div onclick jquery

Q:关闭div的onclick jQuery

I use this code to display a div onclick:

;(function($) {
    $(function () {
        $('.m-help .m-text').hide();
        $('.m-help')
            .live('click', function () {
                $(this).find('.m-text').show();
            })
            .live('click', function () {
                $(this).find('.m-link-close-button').hide();
            });
    });
    $(document).bind('m-ajax-after', function (e, selectors) {
        $('.m-help .m-text').hide();
    });

})(jQuery);

And with this 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>

This does work onclick to display the div, but I want to use the X mark inside the div to close the div again. Closing the div does not work.

What am I doing wrong and how can I fix this problem?

我用这个代码来显示一个div的onclick:

;(function($) {
    $(function () {
        $('.m-help .m-text').hide();
        $('.m-help')
            .live('click', function () {
                $(this).find('.m-text').show();
            })
            .live('click', function () {
                $(this).find('.m-link-close-button').hide();
            });
    });
    $(document).bind('m-ajax-after', function (e, selectors) {
        $('.m-help .m-text').hide();
    });

})(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>

This does work onclick to display the div, but I want to use the X mark inside the div to close the div again. Closing the div does not work.

我做错了什么,我该如何解决这个问题?

answer1: 回答1:

Event delegation

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

http://jsfiddle.net/moogs/9e47j19L/1/

事件代理

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

http://jsfiddle.net/moogs/9e47j19l/1/

answer2: 回答2:

you can get the parent of your close button with parent() so you can do it this way :

(function($){
   $('.m-help .m-text').hide();
   $('.m-help').live('click', function(ev) {
       $(this).find('.m-text').show();
   });
   $(".m-link-close-button").live('click', function (ev) {
           $(this).parent().hide();
   });
})(jQuery)

你可以得到你的父母parent()关闭按钮,所以你可以这样做:

(function($){
   $('.m-help .m-text').hide();
   $('.m-help').live('click', function(ev) {
       $(this).find('.m-text').show();
   });
   $(".m-link-close-button").live('click', function (ev) {
           $(this).parent().hide();
   });
})(jQuery)
answer3: 回答3:

try this: 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">Click</a>
</div>

JS:

$(".m-text").hide();
   $(".m-link").click(function () {
   $(".m-text").show();
});
   $(".m-link-close-button span").click(function () {
   $(".m-text").hide();
});

Working fiddle:http://jsfiddle.net/cncf5Lz9/

try this: 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">Click</a>
</div>

JS:

$(".m-text").hide();
   $(".m-link").click(function () {
   $(".m-text").show();
});
   $(".m-link-close-button span").click(function () {
   $(".m-text").hide();
});

小提琴:http://jsfiddle.net/cncf5lz9/工作

answer4: 回答4:

Use click event on a tag to close the div:

function($) {
    $(function () {
        $('.m-help .m-text').hide();
        $('.m-help')
            .live('click', function () {
                $(this).find('.m-text').show();
            });

            $(".m-link-close-button").live('click', function () {
               $(this).closest('.m-text').hide();
            });
    });
    $(document).bind('m-ajax-after', function (e, selectors) {
        $('.m-help .m-text').hide();
    });

})(jQuery);

使用鼠标单击事件标签上的关闭div:

function($) {
    $(function () {
        $('.m-help .m-text').hide();
        $('.m-help')
            .live('click', function () {
                $(this).find('.m-text').show();
            });

            $(".m-link-close-button").live('click', function () {
               $(this).closest('.m-text').hide();
            });
    });
    $(document).bind('m-ajax-after', function (e, selectors) {
        $('.m-help .m-text').hide();
    });

})(jQuery);
javascript  jquery  html  css