Always keep a dropdown menu open

Asked

Viewed 837 times

1

Using plugin Jquery Dropdown: https://github.com/soundasleep/jquery-dropdown To create multiple 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 have clicked to open.Not closing when clicked on the body, either with right/left click, but close only when clicked on his button again, which will be entitled 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>
<script src="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: http://labs.abeautifulsite.net/jquery-dropdown/

javascript jquery

  • Face in the moral abandons this plugin, it is very bad, the documentation is rhythmic and I see no need in this plugin, because it returns a normal dropdown, same as HTML. I repeat, I see no need for it.

2 answers

2

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

$(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>
<link rel="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>

<div class="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>

2


You don’t even need the .js 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>
<link href="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>

  • As always, brilliant. That’s exactly it. Just something I forgot to put in the question. It could also close when clicked on the links inside it, but only with the normal click.

  • I intend to use your code. I realized it’s better even than the plugin. Now I could also have control classes, for the button and the content. js-button-active and js-content-active

  • Simply Perfect. Thx.

  • on the dropdown I was using, I had managed to put the dropdown to close with the ESC key. I used this code: $(document).keyup(function(e) {&#xA; if (e.keyCode === 27) $('.jq-dropdown').jqDropdown('hide');&#xA;});&#xA; It would be possible to add it to your solution?

  • Awesome. I must say I’m impressed with this solution. I’m talking about the dropdown. Mainly because it’s working even on IE7. Really amazing. One thing I was trying to do in the old plugin, was to capture the name of the dropdown ID, and turn it into a class, and add it to the button, dropdown container and also body. thus: js-button-dropdown2 js-content-dropdown2 js-body-dropdown2 sack.

  • was really bad, now that I’m realizing it. Now, what if I want to keep the solution of the question, in just one of these dropdowns? For example. I will have three dropdowns on a page. But only one of them should look like this there. The others can be normal. Closing by clicking outside.

  • One last thing, and it’ll be round. Inside that menu close Try to avoid closing it with the active right-click inside it.

  • tested, is not passing. It keeps closing when trying to open a link in a new tab with the contextmenu.

  • I’m at the FF, at the GC, it works.

  • 1

    see now........

  • perfect, for today it’s just. Thx.

  • I do not know why, I have a feeling that this solution of yours could solve this: https://answall.com/q/302785/95735

Show 7 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.