向按钮添加第二个功能并禁用某些类

Dako 发表于 Dev

达子

我正在寻找一种方法来消除浏览器窗口在1000pixels以下并添加（切换）新类的某些类。

$( window ).on( 'resize', function( event ) {
    var windowSize = $( window ).width();
    if ( windowSize < 1000 ) {
        if ( $( '.site-header .search-form' ).hasClass( 'search-form--active' ) ) {
            $( '.site-header .search-form' ).removeClass( 'search-form--active' );
        } else if ( $( '.site-header .search-trigger' ).hasClass( 'search-form--active' ) ) {
            $( '.site-header .search-trigger' ).removeClass( 'search-form--active' );
        }
        $( '.search-trigger' ).click( function() {
            $( '.search-trigger' ).toggleClass( 'search-overlay.show' );
        } );
    }
} );

我对此并不陌生，我知道我的问题可能有点愚蠢，与我的代码相同。我不知道你们是否需要其他帮助我，如果您愿意，只需键入what。谢谢您；）

饥饿之星

您可以使用CSS媒体查询代替JS。

简单的例子：

var $btn  = $( 'button' );
var $lead = $( '.lead' );

$btn.on( 'click', function ( e ) {
  $lead.toggleClass( 'active' );
} );

.lead {
  font-size: 1.25rem;
}
.active {
  background-color: #fc0;
}

@media ( min-width: 650px ) {
  .lead {
    font-size: 1rem;
  }
  .active {
    background-color: #aa0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="lead">
  Lateen sail yardarm swab dead men tell no tales warp heave down knave yawl aye man-of-war deadlights skysail me Cat o'nine tails jack ballast spirits stern Brethren of the Coast keel plunder aft interloper square-rigged pressgang. Crack Jennys tea cup reef sails deadlights long boat Pirate Round cackle fruit galleon keel heave to coxswain yo-ho-ho loot brig cog fathom jury mast hearties topgallant cable gabion league handsomely Jolly Roger spirits walk the plank. Pinnace boom measured fer yer chains loot Chain Shot jolly boat Buccaneer ho aft Yellow Jack rope's end matey sutler starboard spirits snow main sheet lookout Corsair ballast Pirate Round bilge cable Barbary Coast spike.
</p>
<p>
 Swing the lead lateen sail scuttle Blimey brig marooned warp belaying pin salmagundi Spanish Main yard crimp fire ship Sail ho splice the main brace gun starboard man-of-war code of conduct keel long clothes gibbet log grog blossom handsomely. Brig Yellow Jack landlubber or just lubber starboard crow's nest scuttle pinnace lugsail ho gangplank transom chase killick bounty mutiny maroon pirate Cat o'nine tails Jack Tar cutlass snow rigging matey splice the main brace Davy Jones' Locker. Wench overhaul quarterdeck crack Jennys tea cup Jack Ketch splice the main brace hulk grog driver starboard mizzen scurvy haul wind jack pink gally me strike colors walk the plank Barbary Coast transom hail-shot sloop Pirate Round long boat.
</p>
<button type="button" id="me">Click Me</button>

第一部分由.active班级代表。目的是说明基于用户交互的媒体查询和状态。.active有两种状态，分别由背景色表示，该背景色在不同的视口尺寸下会发生变化。.active也可以通过单击按钮以显示用户交互来添加/删除。

我还更改了第一段的字体大小，与任何页面事件无关，以说明如何在不使用JS的情况下进行视觉（状态）更改。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。