jquery - 单击其他活动菜单后如何使手风琴菜单向上滑动？

Question

slideUp单击另一个菜单（活动）后，如何制作下拉手风琴菜单？

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="accordion-menu">
  //example of single menu
  <li class="dropdown">
    <a href="#" class="dropdown-toggle no-arrow">
      <span>Dashboard</span>
    </a>
  </li>
  //example of dropdown accordion menu
  <li class="dropdown">
    <a href="javascript:;" class="dropdown-toggle">
      <span>Admin Panel</span>
    </a>
    <ul class="submenu">
      <li><a href="#manageuser">Manage User</a></li>
    </ul>
    <ul class="submenu">
      <li><a href="#announcement">Announcement</a></li>
    </ul>
  </li>
</ul>

标签： jqueryhtmldrop-down-menuaccordion

Answer 1

您需要在此处进行更改

item = obj.find("li").children("a");

在您的代码中，您正在寻找item = obj.find("ul").parent("li").children("a");具有子菜单的元素。

希望这会帮助你。

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

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

        item = obj.find("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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="accordion-menu">
    //example of single menu
    <li class="dropdown">
        <a href="#" class="dropdown-toggle no-arrow">
            <span>Dashboard</span>
        </a>
    </li>
    //example of dropdown accordion menu
    <li class="dropdown">
        <a href="javascript:;" class="dropdown-toggle">
            <span>Admin Panel</span>
        </a>
        <ul class="submenu">
            <li><a href="#manageuser">Manage User</a></li>
        </ul>
        <ul class="submenu">
            <li><a href="#announcement">Announcement</a></li>
        </ul>
    </li>
</ul>