Question

我试图通过将标题分配给类然后在CSS中切换它们来切换标题的CSS属性。我有崩溃类，它有橙色背景和带灰色背景的扩展类。但是，当我尝试切换类时，标题最初分配的类只是放大而不切换。类属性看起来是正确的。

我相信我的CSS代码写得不正确，但我不确定我哪里出错了。非常感谢提前！

我的代码如下：

$(document).ready(function() {
  $('#H2_2').click(function() {
    $('#P_5').slideToggle(200);
    $('#H2_2').toggleClass('expand collapse');
  });
});

.collapse {
  color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 1px;
  text-decoration: none;
  background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%;
  font: 13px / 33px Montserrat;
  padding: 3px 10px;
}
.expand {
  color: rgb(255, 255, 255);
  display: block;
  letter-spacing: 1px;
  text-decoration: none;
  background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%;
  font: 13px / 33px Montserrat;
  padding: 3px 10px;
}

<h2 id="H2_2">
  <a href="#" title="Expand/Collapse" class="expand">apple apple apple</a>
</h2>
<p id="P_5">
  test test
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 1

您正在设置课程＆＃39;展开＆＃39; <a>

    <h2 id="H2_2">
        <a href="#" title="Expand/Collapse" class="expand">apple apple apple</a>
    </h2>

但是按h2

切换$('#H2_2').toggleClass('expand collapse');

所以应该是正确的答案 $('#H2_2>a').toggleClass('expand collapse');

Answer 2

正如Riddler所说，你可以通过简单地为＃H2_2＆gt; a切换课程来克服这个问题，应该可以正常工作。

我建议你扔掉扩展类并将其设为＃H2_2的默认值，只切换崩溃类。在这种情况下，您还可以删除一些定义折叠类的行，因为您只需要否决那些要修改的样式。

$(document).ready(function(){
    $('#H2_2').click(function(){
        $('#P_5').slideToggle(200);
        $('#H2_2').toggleClass('collapse');
    });
});

-

#H2_2 {
    color: rgb(255, 255, 255);
    display: block;
    letter-spacing: 1px;
    text-decoration: none;
    background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%;
    font: 13px / 33px Montserrat;
    padding: 3px 10px;
}
.collapse {
    color: rgb(0, 0, 0);
    background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%;
}

-

  <h2 id="H2_2">
        <a href="#" title="Expand/Collapse">apple apple apple</a>
  </h2>

Answer 3

创建一个具有两个值的类，并仅交替使用您需要的类：

＆＃13;

$(document).ready(function() {
  $('#H2_2').click(function() {
    $('#P_5').slideToggle(200);
    $('#H2_2 .default').toggleClass('collapse');
  });
});

＆＃13;

.default {
  display: block;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 3px 10px;
  font: 13px / 33px Montserrat;
  transition: all 0.3s ease 0s;
}
.expand {
  color: rgb(255, 255, 255);
  background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%;
}
.collapse {
  color: rgb(0, 0, 0);
  background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%;
}

＆＃13;

<h2 id="H2_2">
  <a href="#" title="Expand/Collapse" class="default expand">apple apple apple</a>
</h2>
<p id="P_5">
  test test
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

在JQuery中使用toggleClass的CSS格式不一致

3 个答案: