Question

我（很明显）是jQuery的新手，或者是针对这个问题的脚本编写的东西，通过一些测试，我做了一个小调整大小，测试了我想要进入设计的内容。当我尝试将同样的想法变成一个更复杂的文档时，我遇到了麻烦。

这是我做的原始测试：

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

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

现在，我尝试在以下示例中执行相同的操作，但使用“更多”字样。作为触发器：

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

以下是代码：

＆＃13;

  $(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;
        });
  });

＆＃13;

 /*---------- 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 ----------*/

＆＃13;

<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>

＆＃13;

它没有做任何事情。也许这是一个简单的错误，但我感觉我错过了一些基本的东西，我只是没有学会/想出来。

我知道css ID和类的所有命名约定都不是语义或理想的，现在我只是在尝试。如果有人能提供帮助，我真的很高兴。）

Answer 1

我看到了几个问题：

.switchClass()是一个jQueryUI方法，而不是常规的jQuery。不确定它正在做你想做的事。
你的班级名称不一致。在JS中，您指的是.header-strip-small和.header-strip-big，但在您的HTML和CSS中，它是.heading-strip-small和.heading-strip-big。
您应该在要更改类的元素上添加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;
  });
});

麻烦切换jQuery中的类

1 个答案: