如果未单击一组元素，如何触发事件

Question

仅当一组元素未被单击时，您才能通过什么方式触发 on blur 样式事件。例如：如果您想在输入后自定义下拉菜单，这里是我想要实现的 fiddle； http://jsfiddle.net/hruahrpc/ 单击不在第一个列表中的任何元素应该会导致列表折叠。

我试过停止模糊，但我似乎无法让它工作。

$('ul').hide();
$('input').focus(
    function(){    
        $('ul').show()
    }
);
$('.hidelist').click(
    function(){
        $('ul').hide();
    }

)
$('input').blur(
    function(){
        $('ul').hide();
    }
);

.results{
    background-color:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<div class="results">
    <ul>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
    </ul>
    <ul class="hidelist">    
        <li><a href="#"  >I make the list disapear</a></li>
    </ul>
</div>


<div>I am any other element and I make the list disapear</div>

单击不在第一个列表中的任何元素应该会导致列表折叠。

Answer 1

我就是这样做的。希望我对您有所帮助。

此致。

$('ul').hide()
$('input').focus(
    function(){    
        $('ul').show()
    }
);

$('input').blur(
    function(e){
        e.preventDefault();
        $('.hidelist').click(function(){
            $('ul').hide();
        });
        // You can handle other thing here
    }
);

.results{
    background-color:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<div class="results">
    <ul>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="hidelist" >I make the list disapear</a></li>
    </ul>
</div>
</br>
<div>I am any other element and I make the list disapear</div>

或者使用这个：

  $('ul').hide()
    $('input').focus(
        function(){    
            $('ul').show()
        }
    );

    $('.hidelist').click(function(){
         $('ul').hide();
    });

Answer 2

你可以这样做。它有点复杂，但由于事件的顺序，很难想出一种方法来做你想做的事，但这行得通 working fiddle:

Javascript代码：

var stopHide = false;
var okToExecute = false;
var blurTest = false;
var timeout = undefined;
$('ul').hide()
$('#input1').focus(
    function(){
        $('ul').show();
    }
);
$('.hidelist').click(
    function () {
        stopHide = false;
        okToExecute = true;
        $('#input1').blur();
    }
);
$('.dontHide').click(
    function() {
        stopHide = true;
        okToExecute = true;
        $('#input1').blur();
    }
);
$('input').blur(
    function(e){
        e.preventDefault();
        if(okToExecute)
        {
            if(!stopHide)
            {
                $('ul').hide();
            }
            else
            {
                $('#input1').focus();
            }
            okToExecute = false;
            blurTest = true;
        }
        if(timeout == undefined)
        {
            timeout = true;
            setTimeout(function(){console.log(blurTest);if(!blurTest){                      $('ul').hide();}blurTest = false;timeout = undefined;}, 200);
        }
    }
);

HTML:

<input id="input1" type="text" />
<div class="results">
    <ul>
        <li><a href="#" class="dontHide">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="dontHide">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="dontHide">I have other functionality and I don't hide the list</a></li>
        <li><a href="#" class="hidelist" >I make the list disapear</a></li>
    </ul>
</div>
</br>
<div>I am any other element and I make the list disapear</div>

如果未单击一组元素，如何触发事件

How to trigger an event if a group of elements have not been clicked

javascript

jquery

jquery-plugins