CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user25775
user25775

Reputation: 71

Bootstrap dropdown hide on click select hide dropdown

on click on select in dropdown menu the dropdown become hide the bootstrap dropdown menue i want not hide when i select something within select dropdown

<li> <a href="#"  data-toggle="dropdown" aria-haspopup="true" class="myr-text" aria-expanded="false"> <img src="images/flag-icon.jpg" alt=""> / MYR / English</a>
              <ul class="dropdown-menu select-dropdown-menu">

                <li><p>Regional settings for your next visit</p></li>
                <li role="separator" class="divider"></li>
                <li><form class="form-horizontal" role="form">
                    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
                      <option selected> Malaysia </option>
                      <option> Malaysia 01 </option>
                      <option> Malaysia 02 </option>
                      <option> Malaysia 03 </option>
                      <option> Malaysia 04 </option>
                    </select>
                  </form></li>
                <li><form class="form-horizontal" role="form">
                    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
                      <option selected> Malaysian Ringgit (RM) </option>
                      <option> Malaysian Ringgit (RM) 01 </option>
                      <option> Malaysian Ringgit (RM) 02 </option>
                      <option> Malaysian Ringgit (RM) 03 </option>
                      <option> Malaysian Ringgit (RM) 04 </option>
                    </select>
                  </form></li>
                <li><form class="form-horizontal" role="form">
                    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
                      <option selected> English </option>
                      <option> Urdu </option>
                      <option> Punjabi </option>
                      <option> Pashtoo </option>
                    </select>
                  </form></li>

              </ul>
            </li>

Here is my jquery code which i am using for displaying and hiding

$("body .social-nav li ul.dropdown-menu").click(function(event) {
$(this).closest('.social-nav li').addClass("open-deopdown");
    });

$(body).click(function(event) {
$(this).closest('body ul.social-nav li').removeClass("open-deopdown");
    });

Upvotes: 0

Views: 1335

Answers (1)

Muhammad Nasir
Muhammad Nasir

Reputation: 2204

Try this:

$('body').click(function(event){
     if($(event.target).closest('.open-dropdown').length==0)
     {
        $('li').removeClass("open-dropdown");

         }
    });

$('.myr-text').click(function(){
    $(this).closest('.social-nav li').toggleClass("open-dropdown");
    });

Upvotes: 1

Related Questions