Always keep a dropdown menu open

Question

Always keep a dropdown menu open

Asked 6 years, 7 months ago

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/

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.

– LeAndrade

2018/05/21 at 21:49

2 answers

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.

– John Quimera

2018/05/22 at 01:21
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

– John Quimera

2018/05/22 at 01:29
Simply Perfect. Thx.

– John Quimera

2018/05/22 at 01:44
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) {
 if (e.keyCode === 27) $('.jq-dropdown').jqDropdown('hide');
});
 It would be possible to add it to your solution?

– John Quimera

2018/05/22 at 01:52
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.

– John Quimera

2018/05/22 at 02:12
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.

– John Quimera

2018/05/22 at 02:23
One last thing, and it’ll be round. Inside that menu close Try to avoid closing it with the active right-click inside it.

– John Quimera

2018/05/22 at 02:48
tested, is not passing. It keeps closing when trying to open a link in a new tab with the contextmenu.

– John Quimera

2018/05/22 at 03:00
I’m at the FF, at the GC, it works.

– John Quimera

2018/05/22 at 03:08
1

see now........

– Sam

2018/05/22 at 03:23
perfect, for today it’s just. Thx.

– John Quimera

2018/05/22 at 03:34
I do not know why, I have a feeling that this solution of yours could solve this: https://answall.com/q/302785/95735

– John Quimera

2018/05/29 at 14:02

Show 7 more comments

Browser other questions tagged javascript jquery

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

by user60252 · Answer 1 · 2018-05-22T00:30:58+00:00

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>