Question

我想切换一个“登录面板”，在其中可以打开和关闭，同时当用户单击按钮时也可以展开和收缩主页。难以解释，但与单击顶部3行并打开和关闭订阅框时，Youtube的操作非常相似，主页会扩展到覆盖该区域。

这是我拥有的代码或尝试执行的操作：

$(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 的打开和关闭状态，而 #back_drop 将扩展其填充-向左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()，但实际上您正在寻找的是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吗？

1 个答案: