单击另一个菜单项时如何强制非活动下拉菜单功能

Question

我不知道，因为这个问题何时发生，需要进行许多更改。问题是由于我已经单击了另一个菜单项，如何使下拉菜单处于“非活动”状态？从下面的图片中可以看到一次选中两个项目。下拉菜单也仍然用完了，不应该那样。

我真的确定它与JS有关，但不相关

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);

Answer 1

您可以在菜单的特定项目上使用“ onblur”事件。

您可以尝试类似：

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

   _____________________________________________________________

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