Javascript/CSS

Question

ile divları genişletirken/daraltırken üçgen simgelerini nasıl değiştiririm Bir kullanıcı bir metin parçasını tıkladığında gösterme arasında geçiş yapmak istediğim bir div var. Bir div'u açıp kapatan bir javascript işlevi var. Bu iyi çalışıyor. Ne yapacağımı bilmiyorum, divun açık olup olmadığına bağlı olarak sağa veya aşağıya işaret eden bir üçgene sahip olmaktır.

Benim HTML şuna benzer: sadece HTML, Javascript ve CSS ile ideal olarak

<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a> 
<div id="myDiv" style="display:none"> 
    ... 
</div> 

nasıl bu üçgenler birini eklerim ve doğru yolu gösterecek mi? Üçgen, "Buraya tıklayın ..." dizesinin solunda görünür.

Teşekkürler.

Answer 1

Ayrıca, iki görüntü alma gereksinimini engelleyen, okların her ikisine de sahip olan tek bir görüntü olan görüntülü görüntüye sahip olabilirsiniz. Arka plan resminin konumunu değiştirmek için CSS'yi kullanın, böylece bir seferde yalnızca bir tane gösterilir.

#triangle { 
    background-image: url(triangle.png); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
} 

sonra CSS sınıfı eklemek için javascript kullanın veya doğrudan manipüle:

background-position: 15px 0; 

veya benzeri yerine yanındaki üçgeni kaydırmaya Örneğin, burada bir durumdur.

Answer 2

toggleDiv() işlevinin burada görüntülenmesi yararlı olacaktır. Her neyse, muhtemelen div, belki de "aktif" veya "açık" bir sınıf eklemek gerekir. CSS'nizde Sonra

, gibi bir şey yapın:

div { 
    background: url("downarrow.png") top left no-repeat; 
} 

div.open { 
    background: url("uparrow.png") top left no-repeat; 
} 

güncelleme

Ayrıca gözlemci gelen eleman tıklama olayını can, tamamen HTML'nizin dışarı JS üşünebilirsiniz

senin JS, sonra sınıf ekle veya onun durumuna bağlı olarak kaldırmak. Belki jQuery gibi bir kitaplık kullanmayı düşünebilirsiniz.

Answer 3

Çok sayıda seçenek vardır. İlk önce iki görüntüye ihtiyacınız olacak, onları uptri.jpg ve downtri.jpg olarak adlandıralım. Sonra

.up{ 
     background-image:url(../images/uptri.jpg); 
     background-repeat:no-repeat; 
    } 

    .down{ 
     background-image:url(../images/downtri.jpg); 
     background-repeat:no-repeat; 
    } 

bazı JavScript ile aşağı sınıf için yukarı sınıf takas olabilir: O zaman iki CSS sınıflarını oluşturabilir. Ben jQuery kullanmanızı öneriyoruz, çünkü bu kolay kolaylaştı.

$("#myClicker").toggle(
     function(){$(this).removeClass('up'); 
        $(this).addClass('down'); 
     }, 
     function(){$(this).removeClass('down'); 
        $(this).addClass('up'); 
     }  
    ); 

myClicker, bağlantınızın kimliğidir.