ViktorAksionov / jquery-plugin-dropdownLayer

Simple plugin for jQuery for dropdown layers
MIT License
4 stars 1 forks source link

Close Button #1

Closed agndesigns closed 9 years ago

agndesigns commented 9 years ago

This is a fantastic script, and almost exactly what I've been looking for. My only question is... is there the ability to add a "Close" button to the drop down? Right now it's ability to close the active div falls only on clicking the author image. Is there a way to do this within the .js-description content box?

agndesigns commented 9 years ago

I was able to figure this out by doing the following (line 114 to 125)

    if (typeof n.position() !== "undefined") {
      $("<div class=\"" + settings.dropdownClass + "\"><div class=\"" + settings.dropdownContentClass + "\"><div class=\"" + settings.arrowClass + "\"></div>" + dscr + "</div></div>").insertAfter(rec(current, n));
      $('.close').click(function(){
        $('.'+settings.dropdownClass).hide();
        current.removeClass("active");
        });
    } else {
      $("<div class=\"" + settings.dropdownClass + "\"><div class=\"" + settings.dropdownContentClass + "\"><div class=\"" + settings.arrowClass + "\"></div>" + dscr + "</div></div>").insertAfter(current);
      $('.close').click(function(){
        $('.'+settings.dropdownClass).hide();
        current.removeClass("active");
        });

The adding the following to the inside of js-dropdown: <a href="#" class="close" onclick="jQuery('.js-description').slideUp();">X</a>

And this is my new footer: <script type="text/javascript"> $(document).ready(function() { jQuery('.close').click(function(){ jQuery('.js-description').hide(); }); $('.js-dropdown-item').dropdownLayer({ 'elemSelector': "js-dropdown-item", 'containerClass': "js-dropdown-items", 'descriptionClass': "js-description", 'arrowClass': "js-dropdown-arrow", 'dropdownClass': "js-dropdown", 'dropdownContentClass': "js-dropdown-content", 'disableDropdownClass': "js-dropdown-disable" }); }); </script>