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的类从'open'更改为'close'。

我试过这个，但肯定有一些语法和逻辑错误。也不知道把它放在功能的哪个位置。

$（ “A”）。单击（函数（）{ 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"，因为您说要在<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")电话，因为你可能想要它，但是你需要那个逻辑或不是你的电话。

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

在锚点击上更改div类。如何用classie.js实现？

1 个答案: