jQuery中的问题切换类

Chris 发表于 Dev

克里斯

我（显然）是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和类的所有命名约定都不是语义上的或理想的，现在我只是在做实验。如果有人可以帮助我，我将非常感激:)

悲剧3

我看到几个问题：

.switchClass()是jQueryUI方法，而不是常规jQuery。不知道它在做什么您想要做的事情。
您与班级名称不一致。在JS中，您指的是.header-strip-smalland .header-strip-big，但是在HTML和CSS中，则是.heading-strip-smalland .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;
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。