使用jQuery切换来显示内容，但防止在用户单击输入元素时关闭

Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

本文关键字：单击 用户 输入 元素 jQuery 显示 使用      更新时间：2023-09-26

有一个下拉列表，实现方式大致如下：

    <ul>
<li>
  <div class="block"></div>
  <p>block 1</p>
   <span>
    <b>Here is some text</b>
    <input type="text" placeholder="ENTER HERE">
   </span>
</li>
<li> 
   <div class="block"></div>
   <p>block 2</p>
    <span>
     <b>Here is some text</b>
     <input type="text" placeholder="ENTER HERE">
    </span>
</li>
</ul>

列表中有一些文本和输入。

JS:

$(function(){
  $('ul li').click(function(){
  $('span', this).toggle();
});
});

现在的问题是，如果你点击输入字段，那么列表会立即关闭，如何避免呢？

此外，使用css，我添加了一个三角形，当点击时应该旋转180度，实现这一点的最佳方法是什么？

这里，jsfiddle 的例子

谢谢你谷歌翻译=）

检查JsFiddle：https://jsfiddle.net/z8c7effx/14/

我添加了

$('input[type=text]').click(function(event){
   event.stopPropagation();    
});

防止事件传播，防止li关闭。

还添加了使用以下css类旋转箭头。

.selected
{
  transform: rotate(270deg);
  transform-origin: 20px 8px;
}

试试看：

    <input type="text" onclick="Focus()"/>
<script>
        function Focus(){
        var dropDownList = document.getElementById("yourDropdownId")style.display="block";
        }
</script>

关于下拉菜单的问题-将javascript更新为：

$(function(){
    $('.block').click(function(){
        var target = $(this).parent();
    $('span', target).toggle();
    })
})

您可以检查事件目标，并让span仅在用户单击插入符号时切换

修改示例

$(function(){
    $('ul li').click(function(e){
         if($(e.target).hasClass('block')){
             $('span', this).toggle();
         }
    });
});

您的主要问题是单击选择器的通用性。单击input元素可以使单击事件冒泡到原始li元素，从而切换li。您可以检查目标是否与li元素匹配，然后相应地切换：

$('ul li').click(function(e){
    if (e.target == this)
        $('span', this).toggle();
});

JS Fiddle

你可以使用这个函数，我让它成为

 $(function(){
var container=$("input");
 $('ul li').click(function(e){
 if(!container.is(e.target))
 $('span', this).toggle();
 })
 })

这将检查cick目标是否已输入。并在此的基础上切换

这是因为所有li元素上都有toggle（）函数。即使您单击输入元素，也会触发此操作。有一种叫做事件冒泡和事件捕获的东西->只需谷歌即可：D

您可以通过多种方式停止此事件机制。我认为这可能是最简单的方法：

$('input').click(function(e){
    e.stopPropagation();
})

Mahesh Chavda更快：（

$(function(){
$('ul li').click(function(){
   $('span', this).toggle();
   if($("#input1").is(":focus")){
      $("#span1").show();
    }
    if($("#input2").is(":focus")){
      $("#span2").show();
    }
else{
//no focus for input and textarea
} 
});
});
 .block {
    background: red;
    position: relative;
   }
   .block::after {
    content: ''; 
    position: absolute;
    border: 15px solid transparent;	
    border-top: 20px solid red;
   }
   ul span{
     display:none;
   }
   ul li{
     padding:10px;
     border: 1px solid grey;
     list-style: none;
   
   }
   ul{
     margin: 0;
     padding:0;
   }
   ul p{
     display: inline-block;
     padding-left: 50px;
     margin: 0;
   }
   b{
     padding:30px;
     display:block;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<ul>
<li>
<div class="block"></div>
<p>Блок 1</p>
<span id="span1">
<b>Тут много текста</b>
<input type="text" id="input1" placeholder="ENTER HERE">
</span>
</li>
<li> 
<div class="block"></div>
<p>Блок 2</p>
<span id="span2">
<b>Тут много текста</b>
<input type="text" id="input2" placeholder="ENTER HERE">
</span>
</li>
</ul>

相关文章：