Как использовать jQuery для переключения между плюсом и минусом при свертывании и расширении? - PullRequest
Новая
       13

Как использовать jQuery для переключения между плюсом и минусом при свертывании и расширении?

10 голосов
/ 28 апреля 2010

Я использую код ниже. То, что я хочу сделать, это иметь знак + или - в развернутом или свернутом виде. Как я могу это сделать? Вот код: 

<!--//---------------------------------+
//  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>

Ответы [ 3 ]

18 голосов
/ 28 апреля 2010

Измените разметку msg_head на что-то вроде этого - 

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

и измените функцию переключения так, чтобы она выглядела следующим образом: 

$(".msg_head").click(function(){
    $(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
    $(this).children("span").text("[+]");
}, function() {
    $(this).children("span").text("[-]");
});
5 голосов
/ 28 апреля 2010

Самый простой способ сделать это с помощью .toggleClass( className ). Используя этот метод, вы можете добавить или удалить класс из элемента. Таким образом, изменение вашего кода (непроверенного) кода ниже должно помочь. Вы захотите сместить отступ на эквивалентную величину для ваших графических файлов.

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;
}
2 голосов
/ 28 апреля 2010

У меня есть эта вещь на моем собственном сайте. Вот как я это делаю: 

$(".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 выглядит так: 

<div class="question">
    <span>+</span>blahblah
</div>
<div class="answer">blahblah</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...