更改锚点单击时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”）。click（function（）{if（！classie.has（overlay，'close'））} {classie.add（overlay，'open'）;}}）;

有人可以帮我编写函数来实现更改类，以便在锚定单击时“关闭”并指示我将其放置在何处吗？

我试图实现一个答案，但无济于事。 也许看看我的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"因为您说过要收听div.overlay <a>点击。

其次，可以将jQuery用于类更改部分，还可以验证"div.overlay"是否close了类的close 。

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

我还添加了removeClass("close")调用，因为您可能想要它，但是无论您是否需要逻辑，都是您的调用。

最后，关于放置此代码的位置，它可能位于顶层（最左侧），因为它只是一个事件侦听器。