JQuery的toggleClass和的slideToggle - 不是toggleClass

正常運作這是我真正希望發生的事情：JQuery的toggleClass和的slideToggle - 不是toggleClass

首秀div時頁面加載當在「向上箭頭」，箭頭切換到用戶點擊「向下箭頭」並隱藏div。當用戶點擊「向下箭頭」時，div就會顯示出來。

但是，雖然我確實在頁面加載時頁面正確顯示div，但當用戶單擊「向上箭頭」時，它將一直保持到用戶再次單擊它爲止。

我有以下代碼：

$(document).ready(function(){ 

    $('.show_hide').click(function(){ 
     $(".slidingDiv").slideToggle('slow',function() { 
     $('#arrow-down1').toggleClass('arrow-down1', $(this).is(':visible')); /* display the down arrow */ 
     $('#arrow-down2').toggleClass('arrow-down2', $(this).is(':visible')); /* display the down arrow */ 
     $('#arrow-up1').toggleClass('showhide', $(this).is(':visible')); /* hides the up arrow */ 
     $('#arrow-up2').toggleClass('showhide', $(this).is(':visible')); /* hides the up arrow */   

    }); /* slidingDiv Toggle */  
    }); /* show_hide click function */ 
});

您可以在http://jsfiddle.net/jdYX6/7/

由於看到這個！

來源

2013-04-23 Nina

嗯，你創造的東西非常複雜，你的CSS和jQ實際上非常簡單。 – 2013-04-23 20:33:06

我同意roXon，它看起來像你在那裏進行的整個箭頭事情比它需要更復雜，並且導致你有很多複雜的邏輯來處理它。什麼是建立它與很多小divs的目的？所以只有灰色的部分是可點擊的？所以它不是img相關的？ – 2013-04-23 20:54:03

也注意到，'transform：rotate（）'在IE8中是不支持的（所以你不妨使用jQuery 2.0而不是1.9，如果你確定的話） – 2013-04-23 20:57:28

你的代碼太複雜了，它使任務混亂。

這裏有一個版本，我認爲達到了預期的效果：

HTML

<a href="#" id="handle" class="down">v</a> 
<div id="dialog" class="open"> 
    <p>Lorem Ipsem...</p> 
</div>

的JavaScript

$(document).ready(function() { 
    $("#handle").click(function (e) { 
     e.preventDefault(); 
     $(this).toggleClass("up down"); 
     $("#dialog").slideToggle(); 
    }); 
});

CSS

a#handle { 
    display: block; 
    float: left; 
    font-size: 3em; 
    color: gray; 
    text-decoration: none; 
    width: 1em; 
    height: 1em; 
    line-height: 1em; 
    text-align: center; 
    font-family: sans-serif; 
} 
a:active, a:focus { 
    outline-style: none; 
} 
a.up { 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
} 
div#dialog { 
    background-color: #eef; 
    border-radius: 5px; 
    float: left; 
    padding: 2em; 
}

http://jsfiddle.net/ghodmode/GamDn/2/

來源

2013-04-23 21:57:17

JQuery的toggleClass和的slideToggle - 不是toggleClass

回答

相關問題