Question

在第一篇中，我不会说英语第二：我的问题是＆＃34; toggleclass＆＃34;

我是jquery和javacript的新手，这是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
   $('.humburger').click(function(){
       $('#sidbar').toggleClass('side-lg-tog');
       $('#contenu').toggleClass('contenu-lg-tog');
   });
});
</script>

<style> 
   body {
       margin:0; padding:0;
   }

   #entete {
       height:50px;
       background-color:#197aac;
       position:relative;
   }

   .humburger {
       position:absolute;
       top:17px;
       left:15px;
       cursor:pointer;
   }

   .humburger span {
       background-color:#fff;
       display:block;
       height:2px;
       width:20px;
       margin-bottom:3px;
   }

   #sidbar {
       width:300px;
       height:100%;
       background-color:#e7e7e7; 
       border-right:1px solid #ccc;
       position:absolute;
       top:50px;
       left:0;
       transition:transform .3s ease-in-out;  
   }

   .side-lg-tog{transform:translate(-240px, 0);}
   .contenu-lg-tog {margin-left:60px;!important}

   #contenu {
       background-color:#eff8fd;   
       height:100%;
       margin-left:300px;
       padding:15px 30px;
       transition:margin-left .3s ease-in-out;
   }

   .pad-contenu {
       border:1px solid #ccc;
       min-height:300px;
       background-color:#fff;
   }

   @media (max-width:767px){
    #sidbar{transform:translate(-300px, 0);color:red;}
    #contenu {margin-left:0;}
   }   
</style>
</head>
<body>
    <div id="entete">
       <div class="humburger">
          <span></span>
          <span></span>
          <span></span>
       </div>
    </div>
    <div id="sidbar">test</div>
    <div id="toggle-btn"></div>
    <div id="contenu">
        <div class="pad-contenu">
        </div>
    </div>

</body>
</html>

问题是，当我点击我的汉堡时，侧栏会通过使用新的班级-lg-tog $('#sidbar').toggleClass('side-lg-tog');完美地完成翻译，但内容保留第一个margin-left:300px;，我希望它是60px，谢谢，对不起我的英语，我的第二语言是frensh。

Answer 1

你在声明.contenu-lg-tog {margin-left:60px;!important}中犯了一个错误。

你需要在“！important”之后加分号。只需写下：

.contenu-lg-tog {
   margin-left:60px !important;
}

Answer 2

我认为可以通过

完成

document.getElementsById("id")[0].setAttribute("class", "democlass");

[0]指通过写入按顺序更改的元素。

也可以通过

完成

element.style.CSS_Property = "Value";

element是变量请参阅：W3SCHOOL JS DOM

toggleclass和第一保证金

2 个答案: