CODEWITHSUNDEEP
javascriptjquerymenu
Vinayak
Vinayak

Reputation: 425

Jquery Menu Hide show

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

Hide show works perfect, but when I click on Inner Select option within li even it closes. I tried event.stopPropagation();

Any help ?

Upvotes: 1

Views: 90

Answers (3)

sneha user3189021
sneha user3189021

Reputation: 94

Try this one:

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

     });
   });

Upvotes: 0

Nikhil Batra
Nikhil Batra

Reputation: 3148

Firstly there was error in your html. Updated your 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>

Secondly, you must explicitly handle clicking of select to stop event propagation:

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

See the plunkr

Upvotes: 0

Umesh Sehta
Umesh Sehta

Reputation: 10659

try this:-

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

 });

Demo

Upvotes: 1

Related Questions