Keep a dropdown menu always open

Question

Keep a dropdown menu always open

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

Using Jquery DropDown plugin : link To create various menu styles, it is simple and easy to customize. I wanted to see if it would be possible to keep it always open, - after you clicked to open. Do not close when clicked on the body, either with the right / left click, but close only when you clicked its button again, it will be titled Close .

$("#jq-dropdown-1").on("click",function(event){
    event.stopPropagation();
    $('#jq-dropdown-1').dropdown('show');
});

.fechar {
  display:none;
}
.jq-dropdown-open .abrir {
  display:none
}
.jq-dropdown-open .fechar {
  display:block
}

<link href="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><scriptsrc="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.js"></script>

<a href="#" data-jq-dropdown="#jq-dropdown-1"><span class="abrir">Abrir Dropdown</span><span class="fechar">Fechar</span></a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>

Source: link

javascript jquery

asked by anonymous 21.05.2018 / 23:02

2 answers

2

Following the guidance of Leandro, I did not use the plugin Jquery DropDown is too bad, the documentation is . I used the bootstrap library

$(document).ready(function() {

$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});


});

.dropdown {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><divclass="dropdown keep-open">
    <!-- Dropdown Button -->
    
    <a href="#" data-toggle="dropdown" data-jq-dropdown="#jq-dropdown-1"><span class="abrir">Abrir Dropdown</span>

    
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" 
        aria-labelledby="dLabel">
        <li><a href="#">Science</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>

22.05.2018 / 02:30

What comes after OOP? [closed] Disable maximar button in popup

score 2 · Accepted Answer

You do not even need .js of this plugin. You can just use his CSS and the script below, see:

$("[data-jq-dropdown], .jq-dropdown-menu").on("click", function(e){
   
   e.stopPropagation();

   if($(this).is("[data-jq-dropdown]")){
      var menuid = $(this).data("jq-dropdown");

      $("[data-jq-dropdown]")
      .not($(this))
      .removeClass("jq-dropdown-open");

      $(this)
      .toggleClass("jq-dropdown-open");

      $(".jq-dropdown")
      .not($(menuid))
      .hide();
   
      $(menuid)
      .toggle();
   }else{
      $(".jq-dropdown").hide();

      $("[data-jq-dropdown]")
      .removeClass("jq-dropdown-open");
   }
});

$(document).on("keyup mousedown", function(e){
   if(e.keyCode === 27) $('.jq-dropdown-open').trigger('click');
   if(e.type == "mousedown") $("[fechafora].jq-dropdown-open", this).trigger('click');
});

$("[fechafora], .jq-dropdown").on("mousedown", function(e){
   e.stopPropagation();
});

.fechar {
  display:none;
}
.jq-dropdown-open .abrir {
  display:none
}
.jq-dropdown-open .fechar {
  display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.css" rel="stylesheet"/>
<a href="#" data-jq-dropdown="#jq-dropdown-1">
   <span class="abrir">Abrir Dropdown1</span><span class="fechar">Fechar</span>
</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science1</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>
<br>
<a href="#" data-jq-dropdown="#jq-dropdown-2" fechafora>
   <span class="abrir">Abrir Dropdown2</span><span class="fechar">Fechar</span>
</a>
<div id="jq-dropdown-2" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science2</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>