Question

小提琴：http://jsfiddle.net/vLfqsp5s/

好的，我有一个问题我无法解决，我有一个< ul >元素，其中包含许多< li >个子元素，它们都是正确的，我遇到的问题是JQuery。当我单击它显示的< li >元素时，如果我单击其中的任何元素，它将关闭。我有一个表单，我希望用户能够输入，但如果我点击进入并输入文本，< li >元素将关闭。我该如何防止这种情况？

            $( "li" ).click(function() {
                $( "li" ).not(this).each(function() {
                    $(this).children(".content").slideUp();
                    $(this).children(".comment").slideUp();
                    $(this).children(".sendComment").slideUp();
                });
                $(this).children(".content").slideToggle();
                $(this).children(".comment").slideToggle();
                $(this).children(".sendComment").slideToggle();
            });

谢谢。

Answer 1

当您点击另一个元素中的任何元素时，该事件将会冒出来。您只需要在执行任何操作之前检查event.target。您还可以大量简化代码（查看链接以及您实际上不需要使用.each）：

$( "li" ).on("click", function (e) {
    // If what has been clicked isn't the li (could be its children)
    // we just ignore the event.
    if (e.target != this)
        return;

    // You can chain methods and also include many classes in the selector.
    $( "li" ).not(this).children(".content, .comment, .sendComment").slideUp();

    $(this).children(".content, .comment, .sendComment").slideToggle();
});

event.target

Demo

Answer 2

嗨，我已经更新了你的jsfiddle ..

代码： -

$( "li" ).click(function(e) {

if(!$(e.target).is("li"))
    return false;
    $(this).children(".content").slideToggle();
    $(this).children(".comment").slideToggle();
    $(this).children(".sendComment").slideToggle();
});

请参阅工作示例： - http://jsfiddle.net/vLfqsp5s/3/

Answer 3

你也可以这样试试

    $( "li" ).click(function() {
    if($('.sendComment').hasClass('slide')){
        return false;        
    }else{ 
    $( "li" ).not(this).each(function() {
        $(this).children(".content").slideUp();
        $(this).children(".comment").slideUp();
        $(this).children(".sendComment").slideUp();             
    });
    $(this).children(".sendComment").addClass('slide');
    $(this).children(".content").slideToggle();
    $(this).children(".comment").slideToggle();
    $(this).children(".sendComment").slideToggle();
    }    
    });

单击内部输入时，<li>表单中的标签正在关闭</li>

3 个答案: