（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轉換

回答

相關問題