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);
        });
    });

隐藏显示效果很好，但是当我点击内部选择选项时，即使它关闭也是如此。我试过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>

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

 $(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菜单隐藏显示

3 个答案: