Làm thế nào để sử dụng jQuery để chuyển đổi giữa dấu cộng và dấu trừ khi thu gọn và mở rộng?

Tôi đang sử dụng mã bên dưới. Những gì tôi muốn làm là có dấu hiệu + hoặc - trên chế độ xem mở rộng hoặc thu gọn. Làm thế nào tôi có thể làm điều đó? Đây là mã:Làm thế nào để sử dụng jQuery để chuyển đổi giữa dấu cộng và dấu trừ khi thu gọn và mở rộng?

<!--//---------------------------------+ 
// Developed by Roshan Bhattarai | 
// http://roshanbh.com.np   | 
// Fell Free to use this script | 
//---------------------------------+--> 
<title>Collapsible Message Panels</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //hide the all of the element with class msg_body 
    $(".msg_body").show(); 
    //toggle the componenet with class msg_body 
    $(".msg_head").click(function(){ 
     $(this).next(".msg_body").slideToggle(100); 
    }); 
}); 
</script> 
<style type="text/css"> 
body { 
    margin: 10px auto; 
    width: 570px; 
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif; 
} 
p { 
    padding: 0 0 1em; 
} 
.msg_list { 
    margin: 0px; 
    padding: 0px; 
    width: 383px; 
} 
.msg_head { 
    padding: 5px 10px; 
    cursor: pointer; 
    position: relative; 
    background-color:#FFCCCC; 
    margin:1px; 
} 
.msg_body { 
    padding: 5px 10px 15px; 
    background-color:#F4F4F8; 
} 
</style> 
</head> 
<body> 
<div align="center"> 
    <p>Click on the each news head to toggle 
</p> 

</div> 
<div class="msg_list"> 
     <p class="msg_head">Header-1 </p> 
     <div class="msg_body"> 
      orem ipsum dolor sit amet 
     </div> 

     <p class="msg_head">Header-2</p> 
     <div class="msg_body"> 
      consectetuer adipiscing elit orem ipsum dolor sit amet 
     </div> 
</div> 
</body> 
</html>

Nguồn

2010-04-27 Autolycus

Thay đổi đánh dấu của msg_head một cái gì đó giống như this-

<p class="msg_head">Header-1 <span>[-]</span></p>

và thay đổi chức năng chuyển đổi để trông như thế này-

$(".msg_head").click(function(){ 
    $(this).next(".msg_body").slideToggle(100); 
}) 
.toggle(function() { 
    $(this).children("span").text("[+]"); 
}, function() { 
    $(this).children("span").text("[-]"); 
});

Nguồn

2010-04-27 20:35:04

Tôi chỉ muốn lưu ý rằng tôi có một cái gì đó chính xác tương tự như này, nhưng tôi có div nhấp chuột của tôi sử dụng một liên kết href. Nếu tôi đặt thẻ span trong thẻ , thẻ sẽ không hoạt động. Tôi đã thực hiện một câu hỏi ở đây: http://jsfiddle.net/ultraloveninja/xBxa4/5/ Tôi khá chắc chắn có cách để làm cho nó hoạt động với các liên kết href, nhưng tôi chỉ muốn chia sẻ kể từ khi tôi đã kéo tóc của tôi ra tự hỏi tại sao nó không làm việc cho tôi. – ultraloveninja

Tôi có điều này trên trang web của riêng mình. Đây là cách tôi làm điều đó:

$(".question").click(function() { 
    if ($(this).next(".answer").is(":hidden")) { 
     $(this).next(".answer").slideDown("slow"); 
     $(this).children('span').text('-'); 
    } else { 
     $(this).next(".answer").slideUp("slow"); 
     $(this).children('span').text('+'); 
    } 
});

HTML trông như thế này:

<div class="question"> 
    <span>+</span>blahblah 
</div> 
<div class="answer">blahblah</div>

Nguồn

2010-04-27 20:27:40 dclowd9901

Cách dễ nhất để thực hiện việc này là với .toggleClass(className). Sử dụng phương pháp này, bạn có thể thêm hoặc loại bỏ một lớp từ một phần tử. Do đó, sửa đổi mã của bạn thành mã (chưa được kiểm tra) bên dưới sẽ thực hiện thủ thuật. Bạn sẽ muốn bù đắp phần đệm bằng một số tiền tương đương để phù hợp với các tệp đồ họa của bạn.

Javascript

$(".msg_head").click(function() { 
    $(this).next(".msg_body").slideToggle(100); 
    $(this).toggleClass('msg_head_expanded'); 
});

CSS

.msg_head 
{ 
    padding: 5px 10px; 
    cursor: pointer; 
    position: relative; 
    background:#FFCCCC url('plus.png') no-repeat 0 50; 
    margin:1px; 
} 

.msg_head_expanded 
{ 
    background:#FFCCCC url('minus.png') no-repeat 0 50; 
}

Nguồn

2010-04-27 20:35:30 ahsteele

Bạn cần '.toggleClass' để áp dụng cho' $ (this) 'không phải là' .msg_head' bên ngoài hàm nhấp chuột. Và nó cần '$ ('. Msg_body'). Hide();' – Mottie

@fudgey Tôi nghĩ rằng .slideToggle thực hiện việc ẩn cho bạn. Tôi đã kéo .toggleClass bên trong sự kiện nhưng tôi nghĩ rằng daisy chuỗi nó vào '.click' thật tuyệt. Để được hoàn toàn trung thực tôi biết đủ jQuery để được nguy hiểm. Vì vậy, đây là một cơ hội học tập tốt cho tôi vì tôi không tuyên bố là một chuyên gia, chỉ là một chuyên gia tò mò muốn cải thiện. ;-) – ahsteele

Trên thực tế nó làm những gì bạn nghĩ, nhưng có nó bên ngoài của chức năng nhấp chuột làm cho nó thêm lớp 'msg_head_expanded' trong khi tin nhắn đã được ẩn. Và sau khi nhấp vào đầu, toggleClass không được gọi lại, vì vậy lớp 'msg_head_expanded' luôn ở đó. Dù sao, tôi đã cho bạn 1 vì đây là cách tôi sẽ làm điều này ngay bây giờ :) – Mottie

Làm thế nào để sử dụng jQuery để chuyển đổi giữa dấu cộng và dấu trừ khi thu gọn và mở rộng?

Trả lời

Các vấn đề liên quan