javascript - jQuery UI - .toogleClass() 不工作

Question

我试图在我的页面上操纵 2 div，基本上当 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;
}

至于其他的div，应该会自动上去。我不知道 #content-link2 的初始样式，所以澄清一下为什么需要让它正确 float 等会有所帮助。