（jquery）点击div展开css转换

我想展开和降低标题的高度，当我点击div“箭头”。我试图用jQuery来addClass，但它并没有真正的工作 HTML：（jquery）点击div展开css转换

<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'); 
}); 
}); 
});

我不知道我是怎么现在可以使用相同的按钮降低高度，当它处于活动状态时删除“expandheight”类并在不是时添加它......我试过如果/其他，我失败了。

来源

2016-02-12 ShadowXsc

加“像素”到你的CSS类 –

我写错在这里，在我的代码指定850像素...... – ShadowXsc

请补充。（点）上课前（css） –

您有多个语法错误：

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>

来源

2016-02-12 11:39:36

我知道，我在写这里的时候很匆忙。我想知道如何删除“expandheight”类，当我再次按“箭头”时... – ShadowXsc

检查我的编辑.. –

哈哈，我没有试过使用切换，因为我不知道如何使用。非常感谢！ – ShadowXsc

如果你想扩展和降低头部的高度，使用toggleClass（）而不是使用addClass（）

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

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

https://jsfiddle.net/7yodz723/

（我把周围的边框箭头只是让我们可以清楚地看到例如工作）

来源

2016-02-12 11:45:17 DevStacker

谢谢！有用！ – ShadowXsc

只需使用拨动类开关类。

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

header { 
 
    background: #2282A4; 
 
    color: #fff; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 450px; 
 
    transition: height 0.5 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>

来源

2016-02-12 11:46:35

（jquery）点击div展开css转换

回答

相关问题