jQuery用户界面 - .toogleClass（）不工作

Question

我想操纵2 divs我的网页上，基本上在1 div是隐伏 - 在这个例子中div "template_class" - 另一个div扩展填补了国内空白，但此刻“template_class"皮，但没有任何反应到另一个div，为什么

jQuery的：

$(function() { 
    $(".toogle").on("click", function() { 
     $(".template_class").toggleClass("newClass", 1000); 
     $("#content-link2").toggleClass("newClass3", 1000); 
    }); 
    }); 

个CSS：

.toogle{ 
    padding:0px 0px 0px 0px; 
    text-align: center; 
    margin:0px; 
    width: 160px; 
    height:40px; 
    top: 100px; 
    background:#FF931E; 
    z-index:15; 
    border-radius: 5px 5px 0px 0px; 
    -moz-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
    transform-origin: bottom right; 
    position: relative; 
    right: 0px; 
} 
.newClass3{ 
    margin-top: 50px; 
    width: 95%; 
    height: 89%; 
    border: 2px solid blue; 
    float: right; 
} 
.newClass{ 
    top:0%; 
    width: 0%; 
    height: 0%; 
} 

HTML：

<div class="container template_class "> 
    @foreach ($templates as $template) 
    <a class="content-link" href="{{ asset($template->file)}}"> 
     <img src="{{ asset($template->image)}}"/> 
     </a> @endforeach 

</div> 
    <div class="pace pace-inactive"> 
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"> 
     <div class="pace-progress-inner"></div> 
    </div> 
    <div class="pace-activity"></div> 
</div> 
<div class="features form-group"> 
    <input class="form-control filestyle margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" /> 

    <script> 
    $(function() { 
    $(document).tooltip(); 
    }); 
    </script> 
    <button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button> 
    <button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button> 
    <input title="Choose a color and then click on any box" style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice"> 
    <a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a> 

    <button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button> 
    <button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button> 
    <select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin"></select> 

    <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button> 
    <button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button> 
    <select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin"></select> 

    <button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button> 
    <button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button> 
    <select title="Choose a font size and then click on any box" style="display: none" id="fontsizes1" class="form-control margin"></select> 

    <button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button> 
    <button class="form-control margin btn btn-default" id="startEdit">Edit</button> 

    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
    <button onClick=" updateDatabase(this);" type="button" class="form-control margin btn btn-warning" id="getRequest">Save</button> 
</div> 
<div id="content-link2"> 
     <button class="form-control btn btn-success toogle" ></button> 
</div> 

Answer 1

首先，我认为你使用.togleClass()功能错误。在你的情况下，它等于.toggleClass("classname", true)，它只能将该类添加到元素，而不是切换它（source）。

除此之外，我认为你的CSS是一个点。最好这样做

.newClass{ 
    display: none; 
} 

至于其他divs，他们应该自动上去。我不知道#content-link2的初始风格，所以澄清将帮助你为什么需要使它浮权等