Jquery 当用户点击按钮时切换 css？

Question

我想切换 "login panel" 它可以打开和关闭的位置，同时在用户单击按钮时扩展和收缩主页。很难解释，但与 Youtube 所做的非常相似，当您单击前 3 行并打开和关闭订阅框时，主页会展开以覆盖该区域。

这是我拥有的代码或我尝试做的代码：

$(document).ready(function(){
    $("#show_login").click(function(){
        $("#side_panel").toggle("slide");
         $(this).find('img').toggle("img");
         $("#back_drop").css({'padding-left': '250px'});
    }, function() {
        $("#back_drop").css({'padding-left': '0'});
    });
});

因此，当用户单击按钮 #show_login 时，它会切换 #side_panel 打开和closed while #back_drop 会将其 padding-left 向左扩展 250px。 find('img) 部分找到一个黑色的登录图标，并在切换按钮时将其替换为蓝色图标。

    $(document).ready(function(){
  $("#show_login").click(function(){
    $("#side_panel").toggle("slide");
    $("#back_drop").toggleClass("slide");
    $(this).find('img').toggle("img");

    if ($("#back_drop").hasClass("slide")) {
      $("#back_drop").css({'padding-left': '0'});
    } else {
      $("#back_drop").css({'padding-left': '250px'});
    }
  });
});

* {
    margin: 0;
    padding: 0;
}

a {
    outline: 0;
}

body {
    text-align: center;
    width: 100%;
    -webkit-box-pack: center;
    /* Google Chrome */
    -moz-box-pack: center;
    /* Firefox */
    -o-box-pack: center;
    /* Opera */
    background-color: #CCC;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

header, nav, section, aside, footer, article {
    display: block;
}
#big_wrapper {
    text-align: left;
    /*width: 1325px;*/
    width: 100%;
    }
#top_header {
    position: fixed;
    width: 100%;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom: 2px solid #262626;
    border-radius: 3px 3px 0 0;
    background-color: #404040;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
    z-index: 9999;
}    
#show_login {
    float: left;
    width: 24px;
    padding-top: 12px;
    padding-left: 5px;
    height: auto;
    cursor: pointer;
    }
#side_panel {
    /*position: fixed;
    display: none;*/
    position: absolute;
    background-color: rgb(0, 0, 0, .6);
    color: #000;
    margin-top: 54.491px;
    width: 150px;
    height: 300px;
    word-wrap: break-word;
    z-index: 9999;
}
#back_drop {
    position: absolute;
    background-color: #CCC;
    margin: auto;
    padding-top: 90px;
    padding-left: 250px;
    width: 99%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='big_wrapper'>
<header id='top_header'>

<div id="show_login"><button class='button'>Click</button></div>
                        
<div id='side_panel'></div>
</header>
</div>

<div id='back_drop'>demo text</br>demo text</br>demo text</br>demo text</br>demo text</br>demo text</br></div>

Answer 1

在您的代码片段中，您使用的是 toggle(), but what you're actually looking for is toggleClass()。

$(document).ready(function(){
  $("#show_login").click(function(){
    $("#side_panel").toggleClass("slide");
    $(this).find('img').toggleClass("img");

    if ($("#side_panel").hasClass("slide")) {
      $("#back_drop").css({'padding-left': '250px'});
    } else {
      $("#back_drop").css({'padding-left': '0'});
    }
  });
});

aside {
  background-color: orange;
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
}

.slide {
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="back_drop">
  <button id="show_login">Click me</button>

  <aside id="side_panel">
    Sidebar
  </aside>
</div>

Jquery 当用户点击按钮时切换 css？

Jquery toggle css when user clicks button?

css

youtube

jquery

login

function