更改錨點上的div類。如何使用classie.js實現？

Question

我正在使用以下jQuery代碼來隱藏/顯示移動彈出式菜單。

(function(window) { 
'use strict'; 
// class helper functions from bonzo https://github.com/ded/bonzo 

function classReg(className) { 
return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } 


// classList support for class management 
// altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
hasClass = function(elem, c) { 
    return elem.classList.contains(c); 
}; 

addClass = function(elem, c) { 
    elem.classList.add(c); 
}; 

    removeClass = function(elem, c) { 
    elem.classList.remove(c); 
    }; 
} 

else { hasClass = function(elem, c) { 
    return classReg(c).test(elem.className); 
}; 

addClass = function(elem, c) { 
    if (!hasClass(elem, c)) { 
     elem.className = elem.className + ' ' + c; 
    } }; removeClass = function(elem, c) { 
    elem.className = elem.className.replace(classReg(c), ' '); 
    }; } 

function toggleClass(elem, c) { var fn = hasClass(elem, c) ? removeClass : addClass; fn(elem, c); } 

var classie = { 
// full names 
hasClass: hasClass, 
addClass: addClass, 
removeClass: removeClass, 
toggleClass: toggleClass, 
// short names 
has: hasClass, 
add: addClass, 
remove: removeClass, 
toggle: toggleClass }; 

// transport if (typeof define === 'function' && define.amd) { // AMD define(classie); } else { // browser global window.classie 
= classie; } 

})(window); 

(function() { 
var triggerBttn = document.getElementById('trigger-overlay'),          overlay = document.querySelector('div.overlay'), 
closeBttn = overlay.querySelector('button.overlay-close');   transEndEventNames = { 
'WebkitTransition': 'webkitTransitionEnd', 
'MozTransition': 'transitionend', 
'OTransition': 'oTransitionEnd', 
'msTransition': 'MSTransitionEnd', 
'transition': 'transitionend' 
},   
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ], 
    support = { transitions : Modernizr.csstransitions }; 

    function toggleOverlay() { 
    if(classie.has(overlay, 'open')) { 
     classie.remove(overlay, 'open'); 
     classie.add(overlay, 'close'); 
     var onEndTransitionFn = function(ev) { 
       if(support.transitions) { 
        if(ev.propertyName !== 'visibility') return; 
        this.removeEventListener(transEndEventName,  onEndTransitionFn); 
       } 
       classie.remove(overlay, 'close'); 
     };   
if(support.transitions) { 
overlay.addEventListener(transEndEventName, onEndTransitionFn);     }   
else { 
onEndTransitionFn();   }  }  else if(!classie.has(overlay, 'close')) {   classie.add(overlay, 'open');   } } 

    triggerBttn.addEventListener('click', toggleOverlay);  closeBttn.addEventListener('click', toggleOverlay); })(); 
    $("a").click(function(){ 
     if(!classie.has(overlay, 'close')) { 
     classie.add(overlay, 'open'); 
    } 
    }); 

我想寫的點擊div.overlay內的錨時將類div.overlay的改變，從「開放」到「關閉」的功能。

我試過這個，但肯定有一些語法和邏輯錯誤。也不知道把它放在哪裏。 。

$（ 「A」）點擊（函數（）{ 如果（classie.has（疊加， '關閉'））{ classie.add（疊加， '開'）;！ } }）;

有人可以幫助我編寫函數來實現更改類在關閉點擊「關閉」，並指示我在哪裏放置它？

我試圖實現一個答案，但無濟於事。也許看着我的HTML代碼將有所幫助。我的選擇器有多特殊？ 謝謝。

所有的

   <p><button id="trigger-overlay" class="whitetext smalltext quickfade" type="button">MENU</button></p> 
     <div class="overlay overlay-scale"> 
     <button type="button" class="overlay-close fade">Close</button> 
     <div class="info"> 
     <div id="hamdiv"> 
      <a id="hammenu" class="blacktext quickfade" href="home.html#graybox.html">ABOUT</a> 
      <a id="hammenu" class="blacktext quickfade" href="work.html">WORK</a> 
      <a id="hammenu" class="blacktext quickfade" href="home.html#footer">CONTACT</a> 
     </div> 
     </div> 
    </div> 

Answer 1

首先，你的選擇不應該只是"a"而是"div.overlay a"因爲你說你要聽<a>點擊裏面div.overlay。

其次，你可以使用jQuery的類變化部分，也以驗證是否"div.overlay"有類close切換與否。

$("div.overlay a").click(function() { 
    if (!$("div.overlay").hasClass("close")) { 
    $("div.overlay").addClass("open"); 
    //$("div.overlay").removeClass("close"); 
    } 
}); 

我還添加了removeClass("close")調用，因爲你可能想它，但無論您需要的邏輯是位與否是你的電話。

最後，關於你放置這段代碼的位置，它可能只是在頂層（最左邊的層），因爲它只是一個事件監聽器。