javascript - 在 jQuery 中切换类时遇到问题

Question

我(显然)是 jQuery 的新手，或者是与此相关的脚本编写人员，经过一些测试，我调整了一个小的 div 大小，以测试我想在设计中考虑的内容。当我尝试将相同的想法应用到更复杂的文档中时，我遇到了麻烦。

这是我做的原始测试:

http://codepen.io/chris86/pen/avvWwJ

请注意，当您单击顶部的白色位时，它会切换 div 的大小调整。

现在，我尝试在以下示例中执行相同的操作，但使用“阅读更多”一词作为触发器:

http://codepen.io/chris86/pen/RWrgKv

代码如下:

  $(function() {
        $('#moreText').click(function(){
           $(".header-strip-small").switchClass("header-strip-small","header-strip-big",'normal');
           $(".header-strip-big").switchClass("header-strip-big","header-strip-small",'normal');
           return false;
        });
  });

 /*---------- Basic Elements Start ----------*/

h1 {
  font-family: 'Slabo 13px', serif;
  font-size: 1.375em;
  font-weight: 900;
  color: #000000;
}

h2 {
  font-family: 'Slabo 13px', serif;
  font-size: 1.125em;
  font-weight: 900;
  color: #000000;
}

p {
  font-family: 'Slabo 13px', serif;
  font-size: 1.000em;
  font-weight: normal;
  color: #4d4d4d;
}

a {
  color: #000000;
  font-family: 'Open Sans', 'sans-serif';
  font-size: 1.000em;
  font-weight: normal;
}

body {
  width: 100%;
  background-color: #efefef;
  margin: 0 auto;
  height: 1200px;
}

/*---------- Basic Elements End ----------*/

/*---------- Header Elements Start ----------*/


.heading-strip-small {
  width: 100%;
  background-color: #ffffff;
  border-style: dashed;
  border-width: 0px 0px 1px 0px;
  height: 18.125em;
  margin-bottom: 0px;
}


.heading-strip-big {
  width: 100%;
  background-color: #ffffff;
  border-style: dashed;
  border-width: 0px 0px 1px 0px;
  height: 22em;
  margin-bottom: 0px;
}


#heading-content {
  margin: 0 auto;
  width: 960px;
  clear: left;
}

#heading-text {
  float:left;
  clear:left;
  width:50%;
  margin-top: 6.250em;
}

#begin-about {
  width: 100%;
}

#social-bulbs {
  float: right;
  clear: right;
  margin: 0 auto;
}

.bulb {
  height: 6.250em;
  float:right;
  text-align:center;
}

.glass {
  margin: 0 auto;
  width: 50px;
  height: 50px;
  background-color: white;
  border: 1px solid #333333;
  border-radius: 25px;
  margin-top: 6.250em;
  border-bottom: 2px solid #333333;
}

.wire {
  height: 100%;
  width: 2px;
  background-color: #000000;
  float: right;
  margin-left: 30px;
  margin-right: 30px;
}

.fa {
  margin-top:18px;
}


/*---------- Header Elements End ----------*/

#nav-options{
  margin: 0 auto;
  width: 960px;
  height: 100%;
  clear: both;
}

#nav-text {
  width:50%;
  margin-top:3.125em;
  margin-bottom:1.563em;
}







/*---------- Buttons Start ----------*/


.btn {
  display: inline block;
  border-style: solid;
  border-width: 0.063em 0.063em 0.125em 0.063em;
  border-color: #333333;
}

.primary {
  background-color: #ffffff;
  border-radius: 0.350em;
  font-family: 'Open Sans', 'sans-serif';
  padding: 0.563em 1.250em 0.625em 1.250em;
  font-size: 1.125em;
  font-weight: 800;
  text-decoration: none;
  margin: 0em 1.250em 0em 0em;
  color: #333333;
  vertical-align: top;
  max-height: 2.5em;
}

.primary:hover {
  transition: background-color 0.2s ease;
  background-color: #f2f2f2;
}

.primary:active {
  transform: translate(0.000em, 0.063em);
  -webkit-transform: translate(0.000em, 0.063em);
  border-style: solid;
  border-width: 0.125em 0.063em 0.063em 0.063em;
}

.secondary {
  background-color: #f2f2f2;
  border-radius: 0.350em;
  font-family: 'Open Sans', 'sans-serif';
  padding: 0.563em 1.250em 0.625em 1.250em;
  font-size: 1.125em;
  font-weight: 800;
  text-decoration: none;
  margin: 0em 1.250em 0em 0em;
  color: #333333;
  vertical-align: top;
  max-height: 2.5em;
}

.secondary:hover {
  transition: background-color 0.2s ease;
  background-color: #E6E6E6;
}

.secondary:active {
  transform: translate(0.000em, 0.063em);
  -webkit-transform: translate(0.000em, 0.063em);
  border-style: solid;
  border-width: 0.125em 0.063em 0.063em 0.063em;
}

.circular-btn {
  background-color: #ffffff;
}

.circular-btn:hover {
  transition: background-color 0.2s ease;
  background-color: #f2f2f2;
}

.circular-btn:active {
  transform: translate(0.000em, 0.063em);
  -webkit-transform: translate(0.000em, 0.063em);
  border-style: solid;
  border-width: 0.125em 0.063em 0.063em 0.063em;
}

/*---------- Buttons End ----------*/

<head>
  
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Slabo+13px' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

</head>

<body>

  <div class="heading-strip-small"> 
    
    <div id="heading-content">

      <div id="heading-text">
        <h1>CHRIS PATTISON<h1>
          <h2>UX + INTERACTION DESIGN</h2>
            <p id="begin-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod at velit et ullamcorper. Sed aliquam ipsum vitae imperdiet congue. <span id="moreText" value="Switch Class">Read more...</span>
            </p>
      </div> <!-- End of heading-text -->
    
      <div id="social-bulbs">

          <div id="bulb1" class="bulb">
            <div class="wire"></div><div class="glass btn circular-btn"><i class="fa fa-stack-exchange fa-lg"></i></div>
          </div>

          <div id="bulb2" class="bulb">
            <div class="wire"></div><div class="glass btn circular-btn"><i class="fa fa-twitter fa-lg"></i></div>
          </div>

          <div id="bulb3" class="bulb">
            <div class="wire"></div><div class="glass btn circular-btn"><i class="fa fa-linkedin fa-lg"></i></div>
          </div> 

      </div> <!-- End of social-bulbs -->
          
    </div> <!-- End of heading-content -->
   
  </div> <!-- End of heading-strip -->


  <div id="nav-options">
    
    <p id="nav-text">To see some examples of my work or get in touch please choose from the following:</p>

    <a href="#" class="btn primary">SELECTED WORKS</a>
    <a href="#" class="btn primary">GET IN TOUCH</a>

  </div>

它只是什么都不做。也许这是一个简单的错误，但我觉得我错过了一些我还没有学到/弄清楚的基本知识。

我知道 css id 和类的所有命名约定都不是语义的或理想的，现在我只是在试验。如果有人能提供帮助，我将非常感激:)

Answer 1

我看到了几个问题:

1. .switchClass() 是一个 jQueryUI 方法，不是常规的 jQuery。不确定它是否正在执行您希望它执行的操作。
2. 你的类(class)名称不一致。在 JS 中，您指的是 .header-strip-small 和 .header-strip-big，但在您的 HTML 和 CSS 中，它是 .heading -strip-small 和 .heading-strip-big。
3. 不是通过类名(您正在更改的类名)查找它们，您应该将 id 添加到要更改类的元素，然后只需使用 .toggleClass() 在上面切换类。

查看我更新的笔:http://codepen.io/anon/pen/BojZJy

HTML 更改:

<div id="heading-container" class="heading-strip-small"> 

JS:

$(function() {
  $('#moreText').click(function(){
    $("#heading-container").toggleClass("heading-strip-small heading-strip-big");
    return false;
  });
});