Как заставить неактивную функцию выпадающего списка при нажатии на другой пункт меню - PullRequest
Новая
       30

Как заставить неактивную функцию выпадающего списка при нажатии на другой пункт меню

0 голосов
/ 25 октября 2019

Не знаю с тех пор, когда возникла эта проблема, было сделано много изменений. Проблема в том, как сделать раскрывающееся меню «неактивным», так как я уже нажимаю на другой пункт меню? Из изображения ниже выглядит как два выбранных элемента одновременно. Раскрывающийся список также все еще израсходован, не должен быть таким.

Я действительно уверен, что это связано с JS, но не

enter image description here

HTML 

<div class="sidebar-menu">
    <ul id="accordion-menu">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle no-arrow">
                <span class="fa fa-dashboard"></span><span class="mtext">Dashboard</span>
            </a>
        </li>
        <li class="dropdown">
            <a href="javascript:;" class="dropdown-toggle">
                <span class="fa fa-code"></span><span class="mtext">Admin Panel</span>
            </a>
            <ul class="submenu">
                <li><a href="#manageuser">Manage User</a></li>
            </ul>
        </li>
    </ul>
</div>

JS 

// sidebar menu Active Class
$('#accordion-menu').each(function(){
    var vars = window.location.href.split("/").pop();
    $(this).find('a[href="'+vars+'"]').addClass('active');
});

$("#accordion-menu").vmenuModule({
    Speed: 400,
    autostart: false,
    autohide: true
});

// sidebar menu accordion
(function($) {
    $.fn.vmenuModule = function(option) {
        var obj,
        item;
        var options = $.extend({
            Speed: 220,
            autostart: true,
            autohide: 1
        },
        option);
        obj = $(this);

        item = obj.find("ul").parent("li").children("a");
        item.attr("data-option", "off");

        item.unbind('click').on("click", function() {
            var a = $(this);
            if (options.autohide) {
                a.parent().parent().find("a[data-option='on']").parent("li").children("ul").slideUp(options.Speed / 1.2,
                    function() {
                        $(this).parent("li").children("a").attr("data-option", "off");
                        $(this).parent("li").removeClass("show");
                    })
            }
            if (a.attr("data-option") == "off") {
                a.parent("li").children("ul").slideDown(options.Speed,
                    function() {
                        a.attr("data-option", "on");
                        a.parent('li').addClass("show");
                    });
            }
            if (a.attr("data-option") == "on") {
                a.attr("data-option", "off");
                a.parent("li").children("ul").slideUp(options.Speed)
                a.parent('li').removeClass("show");
            }
        });
        if (options.autostart) {
            obj.find("a").each(function() {

                $(this).parent("li").parent("ul").slideDown(options.Speed,
                    function() {
                        $(this).parent("li").children("a").attr("data-option", "on");
                    })
            })
        }
        else{
            obj.find("a.active").each(function() {

                $(this).parent("li").parent("ul").slideDown(options.Speed,
                    function() {
                        $(this).parent("li").children("a").attr("data-option", "on");
                        $(this).parent('li').addClass("show");
                    })
            })
        }

    }
})(window.jQuery || window.Zepto);

1 Ответ

0 голосов
/ 25 октября 2019

Вы можете использовать событие "onblur" для определенного пункта меню.

Вы можете попробовать что-то вроде: 

   <a onblur="myfunction();" href="...">Menu</a>

   _____________________________________________________________

   function myfunction(){
       //code to make link inactive(change the background color(say))
   }
...