Jquery 菜单隐藏显示

Question

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

Jquery :

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

隐藏显示效果完美，但当我点击 li 中的内部 Select 选项时，它甚至会关闭。我试过 event.stopPropagation();

有什么帮助吗？

Answer 1

试试这个：-

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

 });

Demo

Answer 2

首先你的 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>

其次，您必须明确处理单击 select 以停止事件传播：

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

见plunkr

Answer 3

试试这个：

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

     });
   });

Jquery 菜单隐藏显示

Jquery Menu Hide show

javascript

jquery

menu