jQuery的菜单隐藏显示

<div class="tools">TOOLS 
    <ul> 
     <li class="toolone">First 
      <div class="plugin"> 
       <select>Option 
         <optios></options 
       </select> 
      </div> 
     </li> 
    <ul> 
</div>

的Jquery：jQuery的菜单隐藏显示

$(document).ready(function() { 
     $('.toolone').click(function() { 
      $(this).find('.plugin').toggle(200); 
     }); 
    });

隐藏显示完美的作品，但是当我李中在内蒙古选择选项单击它，甚至关闭。我试过event.stopPropagation（）;

任何帮助？

来源

2015-06-26 Vinayak

试试这个： -

$(document).ready(function() { 
    $('.toolone').click(function() { 
     $(this).find('.plugin').toggle(200); 
    }); 
$('.toolone select').click(function(e){ 
    e.stopPropagation(); 
    }) 

});

Demo

来源

2015-06-26 07:26:10

谢谢你的帮助，工作！ – Vinayak

@Vinayak很高兴帮助:) –

@Vinayak - 如果你对学习者的回答感到满意，请将其标记为接受否则有人会一直发布相同的答案 –

首先出现在你的HTML是错误。更新你的HTML：

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="tools">TOOLS 
    <ul> 
     <li class="toolone">First 
      <div class="plugin"> 
       <select> 
         <option>abc</option> 
       </select> 
      </div> 
     </li> 
    </ul> 
</div> 
    </body> 

</html>

其次，必须明确处理的选择点击停止事件传播：

$(document).ready(function() { 
     $('.toolone').click(function() { 
      $(this).find('.plugin').toggle(200); 
     }); 
     $('.toolone select').click(function (e) { 
      e.stopPropagation(); 
     }); 
    });

见plunkr

来源

2015-06-26 07:30:36

试试这个：

$(document).ready(function() { 
    $('.toolone').click(function (e) { 
     if(e.target !== this) { 
      return; 
     } 
     $(this).find('.plugin').toggle(200); 

    }); 
    });

来源

2015-06-26 07:39:57

jQuery的菜单隐藏显示

回答

相关问题