Question

当我按下div＆＃34; arrow＆＃34;时，我想扩展和减少标题的高度。我曾尝试使用Jquery添加类，但它并没有真正起作用 HTML：

<header>
    <p>The title..</p>
    <h1>Some text</h1>
      <div class="arrow" id="arrow">
        <img src="img/arrow.svg" />
      </div>
</header>

CSS

header { 
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;
  transition: height 0.5 ease;
}
expandheight {
  height: 850px;
}

JQuery的：

$(document).ready(function() {
   $(function() {
      $('#arrow').click(function() {
         $('header').addClass('expandheight');
}); 
}); 
});

我现在不知道如何使用相同的按钮降低身高，以便移除＆＃34; expandheight＆＃34;当它处于活动状态时加入它并在不活动时添加它...我已尝试if / else，我失败了。

Answer 1

您有多种语法错误：

expandheight应使用.expandheight
使用跨浏览器动画属性
使用toggleClass添加/删除课程

$(document).ready(function() {
  $(function() {
    $('#arrow').click(function() {
      $('header').toggleClass('expandheight');
    });
  });
});

header {
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;      
  -webkit-transition:height 0.5s ease;
  -moz-transition:height 0.5s ease;
  transition:height 0.5s ease;
}

.expandheight {
  height: 850px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
  <p>The title..</p>
  <h1>Some text</h1>
  <div class="arrow" id="arrow">
     <img src="img/arrow.svg" />
  </div>
</header>

Answer 2

如果要扩展和减小标题的高度，请使用toggleClass（）而不是使用addClass（）

jQuery(document).ready(function() {
    jQuery(function() {
        jQuery('#arrow').click(function() {
            jQuery('header').toggleClass('expandheight');
        });
    });
});

此外，您的代码中有一些错误。我已经创建了一个jsfiddle来向你展示它的工作原理。

https://jsfiddle.net/7yodz723/

（我在箭头周围放了一个边框，这样我们就可以清楚地看到这个例子正在工作）

Answer 3

只需使用切换类切换类。

＆＃13;

$(document).ready(function() {
  $(function() {
    $('#arrow').click(function() {
      $('header').toggleClass('expandheight');
  });
 });
});

＆＃13;

header { 
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;
  transition: height 0.5 ease;
}
.expandheight {
  height: 850px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
  <p>The title..</p>
  <h1>Some text</h1>
  <div class="arrow" id="arrow">
     <img src="img/arrow.svg" />
  </div>
</header>

＆＃13;

（Jquery）点击div扩展css过渡

3 个答案: