Question

我不知道如何在没有撰写文章的情况下在标题中写下问题。基本上我想点击加号然后它打开一个div然后在该div内它们是右上角的退出按钮。当您单击退出按钮时，我希望它关闭打开的div。不幸的是，我无法挑出那个选择器来关闭div。

除退出按钮外，我一切正常。这是my jsfiddle link

这是jquery

function showSign(){
    var plus = $('.plusSign');
    health = $('.plus'),
    health.hide();
    plus.on('click', function(){
    var val1 = $(this).children('div').attr('class'),
    val2 = val1.split(' ')[0];
    $('.'+val2).show();
    // alert(val2);
});
var closeBtn = $('.exitBtn');
    closeBtn.on('click', function(){
        $(this).parent('div.plus').hide();//this is where i am having problems
    });
}showSign();

任何帮助都将不胜感激。

Answer 1

请尝试以下X按钮单击处理程序：

    closeBtn.on('click', function(e){
        e.stopPropagation();
        $(this).closest('div.plus').hide();
    });

演示：http://jsfiddle.net/w66QF/9/

你有$(this).parent('div.plus')的地方没有选择要隐藏的任何元素，因为.parent()没有通过DOM树搜索，如果匹配提供的选择器则选择直接父级，或者什么也不选择（如果直接父节点与选择器不匹配）。我建议的.closest() method会搜索，直到找到匹配项（或达到最高级别）。

您还需要添加e.stopPropagation()，否则X中的click事件会冒泡到您的其他点击处理程序，因为X包含在.plusSign元素中，因此会在之后立即显示弹出窗口隐藏它。

Answer 2

尝试使用closest()之类的，

var closeBtn = $('.exitBtn');
$('#diagnostic').on('click', '.exitBtn', function () {
    $(this).closest('div.plus').hide();
});

Demo

Answer 3

.plusSign是整个div。 .exitBtn是其子女。点击.exitBtn后，点击.plusSign的事件也会被触发。

为.plusSign span分配点击事件。

写：

var plus = $('.plusSign span');
var closeBtn = $('.exitBtn');
health = $('.plus'),
health.hide();
plus.on('click', function () {    
    var val1 = $(this).parent().children('div').attr('class'),
        val2 = val1.split(' ')[0];
    $('.' + val2).show();
});
closeBtn.on('click', function () {    
    $(this).closest('.plus').hide();
});

Updated fiddle here.

Answer 4

在您的脚本中尝试此代码

<script>
        function showSign(){
    var plus = $('.plusSign');
            health = $('.plus'),
            health.hide();

    plus.on('click', function(){
        var val1 = $(this).children('div').attr('class'),
                val2 = val1.split(' ')[0];
                $('.'+val2).show();
        // alert(val2);
    });
    $('.exitBtn').click(function(){
         $(this).closest("div.plusSign").hide('slow');

        });
    }showSign();


    </script>

Answer 5

这是一种方法：

var accordion, hidden, handle_event;

accordion = $("#diagnostic");

// hide all div.plus elements
hidden = accordion.find('.plus').hide();

handle_event = function(event) {
    event.preventDefault();

    var element;

    element = $(event.target);

    hidden.hide();

    // show nested accordion item (if it's not closing click)
    element.find('.plus').show();
};

// handle events
accordion.on('click', '.plusSign', handle_event);

Answer 6

你的代码没问题。只进行2次小改动：

点击该功能时传递event参数，然后使用event.stopPropagation()。
而不是parent('div.plus')，请使用parents('div.plus')

这样的事情：

closeBtn.on('click', function(e){
    e.stopPropagation();
      $(this).parents('div.plus').hide();
});

这是您更新的jsfiddle：http://jsfiddle.net/ashishanexpert/w66QF/16/

祝你好运！

无法使用选择器关闭div

6 个答案: