Làm cách nào để trao đổi biểu tượng hình tam giác khi thực hiện mở rộng/thu gọn div bằng Javascript/CSS

Question

Tôi có một div mà tôi muốn chuyển đổi giữa hiển thị hoặc không khi người dùng nhấp vào một đoạn văn bản. Tôi có một chức năng javascript để bật hoặc tắt div. Điều đó hoạt động tốt. Những gì tôi không biết làm thế nào để làm là để có một tam giác trỏ đến bên phải hoặc xuống tùy thuộc vào việc div được mở.

HTML của tôi trông như thế này:

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

Làm thế nào để thêm một trong những hình tam giác và có nó vạch ra con đường đúng, tốt nhất là chỉ với HTML, Javascript, CSS và? Hình tam giác sẽ xuất hiện ở bên trái của chuỗi "Nhấp vào đây ...".

Cảm ơn.

Answer 1

Bạn cũng có thể có hình ảnh sprite, là một hình ảnh có cả hai mũi tên, ngăn không cho tìm nạp hai hình ảnh. Sử dụng CSS để thay đổi vị trí của hình nền để chỉ một hình ảnh hiển thị tại một thời điểm. Ví dụ, đây là một trong những trạng thái:

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

sau đó sử dụng javascript để thêm một lớp CSS hoặc trực tiếp thao tác để:

background-position: 15px 0; 

hoặc tương tự để chuyển sang hình tam giác tiếp theo vào vị trí.

Answer 2

Chức năng toggleDiv() của bạn sẽ hữu ích khi xem tại đây. Nhưng dù sao bạn có lẽ chỉ cần thêm một lớp học vào div của bạn, có lẽ là "hoạt động" hoặc "mở".

Sau đó, trong CSS của bạn, làm một cái gì đó như:

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

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

cập nhật

Bạn cũng có thể xem xét chuyển JS của bạn ra khỏi HTML của bạn hoàn toàn, bạn có thể quan sát sự kiện click vào phần tử từ JS của bạn, sau đó thêm lớp hoặc loại bỏ nó dựa trên trạng thái của nó. Có thể xem xét việc sử dụng một thư viện như jQuery.

Answer 3

Có một số tùy chọn. Trước tiên, bạn sẽ cần hai hình ảnh, chúng ta hãy gọi chúng là uptri.jpg và downtri.jpg. Sau đó, bạn có thể tạo hai lớp CSS:

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

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

Sau đó, với một số JavScript bạn có thể trao đổi lớp lên cho lớp xuống. Tôi sẽ đề nghị sử dụng jQuery vì nó làm cho nó dễ dàng tầm thường.

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

Nơi myClicker là id của liên kết của bạn.