Question

友

我一直在使用.js导航菜单切换以下链接的实现：click here.

var theToggle = document.getElementById('toggle');
// based on Todd Motto functions
// http://toddmotto.com/labs/reusable-js/

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + '');
}
// addClass
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
// removeClass
function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
// toggleClass
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

theToggle.onclick = function() {
   toggleClass(this, 'on');
   return false;
}

我想在这里修改代码，以便在单击菜单按钮后，带有链接的菜单框会自动关闭。我想我需要一些额外的.onclick功能。有什么建议吗？

干杯。

Answer 1

添加一个事件监听器，一旦点击任何菜单项，就会触发<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset="utf-8" /> <script type="text/javascript"> $(function () { $('#chkfilter').on('keyup', function () { var query = this.value; $('[id^="list"]').each(function (i, elem) { if (elem.value.indexOf(query) != -1) { $(this).closest('label').show(); } else { $(this).closest('label').hide(); } }); }); }); </script> <style> input { display: inline; } </style> </head> <body> <form id="form1" runat="server"> <div> <label> <ul id="list" runat="server" style="list-style-type: none;"> </ul> </label> <div id="filters" runat="server"> </div> <input type="text" id="chkfilter"> </div> protected void Page_Load(object sender, EventArgs e) { fillcolor(); } public void fillcolor() { string str = string.Empty; string str1 = string.Empty; string result = string.Empty; clsColor objcolor = new clsColor(true); clsColorProduct objProduct = new clsColorProduct(true); objcolor.getColor(); for (int i = 0; i < objcolor.ListclsColor.Count; i++) { str += "<li><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='chk' value=" + objcolor.ListclsColor[i].ColorName + " class='category'><div class='font'><div class='Color' style=background-color:" + objcolor.ListclsColor[i].ColorCode + "></div></div><label class='font' for=" + objcolor.ListclsColor[i].ColorID + ">" + objcolor.ListclsColor[i].ColorName + "</label></div></li>"; if (objcolor.ListclsColor[i].ColorID != 0) { str1 += "<td><div class='resultblock' ColorID=" + objcolor.ListclsColor[i].ColorID + " data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + objcolor.ListclsColor[i].ColorName + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>"; objProduct.getColorp(); for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++) { } } } list.InnerHtml = str; filters.InnerHtml = result; // sugg.InnerHtml = str1; } }功能。

toggleClass()

Answer 2

是的，您需要在菜单按钮上添加一些额外的点击功能。我为你创建了额外的点击，请看一下。我已经参考了您提供的相同链接。

var list = document.getElementsByTagName("li");
for (i = 0; i < list.length; i++) {
  list[i].onclick = function() {
     toggleClass(theToggle, 'on');
     return false;
  }
}

自动关闭.js切换菜单

2 个答案: