Jquery динамическое переключение символа плюс / минус - PullRequest
Новая
       2

Jquery динамическое переключение символа плюс / минус

3 голосов
/ 22 ноября 2011

Я использую скрипт переключения jquery. Мне бы очень хотелось, чтобы знак плюс (+) отображался в заголовке, когда переключатель не был открыт, и символ минус (-), когда он был открыт.

Причина, по которой я не просто использую приведенный ниже скрипт, заключается в том, что текущий скрипт, который я использую, автоматически закрывает открытый переключатель при нажатии на другой переключатель - эта функция мне действительно нравится! :) 

$('#toggle-view li').click(function () {

    var text = $(this).children('p');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).children('span').html('-');     
    } else {
        text.slideUp('200');
        $(this).children('span').html('+');     
    }   
});
});

скрипт, который я использую: 

$(document).ready(function(){
$(".parents-toggle > div").click(function () {
$(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".iteminfo-toggle").slideToggle();
});
});

мой HTML 

<div class="parents-toggle">
<div class="itemheading2_toggle">Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

У кого-нибудь есть идеи, как объединить символы плюс / минус для отображения в текущем скрипте, который я использую? ^^;

Вот пример сценария переключения минус / плюс: http://www.queness.com/resources/html/toggle/index.html

Ответы [ 3 ]

3 голосов
/ 22 ноября 2011

Как насчет этого?

html: добавить интервал для символа 

<div class="parents-toggle">
    <div class="itemheading2_toggle"><span class="symbol">-</span>Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

js: переключатель +/- символ 

$(".parents-toggle > div").click(function () {
    $(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
    $(this).siblings(".iteminfo-toggle").slideToggle();

    // toggle open/close symbol
    if($('.itemheading2_toggle span').text() == '-'){
        $('.itemheading2_toggle span').text('+');   
    } else {
        $('.itemheading2_toggle span').text('-');
    }
});

Демо: http://jsfiddle.net/bg7tw/

2 голосов
/ 22 ноября 2011

Вот как бы я это сделал: 

var parent = $('#toggle-view'), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

// bind the click to all headers
$('li h3', parent).click(function() {

    // get the li that this header belongs to
    var li = $(this).closest('li');

    // check to see if this li is not already being displayed
    if (!$('p', li).is(':visible'))
    {
        // loop on all the li elements
        $('li', parent).each(function() {

            // slide up the element and set it's marker to '+' 
            $('p', $(this)).slideUp(delay);
            $('span', $(this)).text('+');
        });

        // display the current li with a '-' marker
        $('p', li).slideDown(delay);
        $('span', li).text('-');
    }
});

Проверьте http://jsfiddle.net/v9Evw/, чтобы увидеть его в действии.

Чтобы скрыть клик, если он виден в данный момент, добавьте еще один к методу клика: 

    else {
        $('p', li).slideUp(delay);
        $('span', li).text('+');  
    }

Проверьте http://jsfiddle.net/v9Evw/1/, чтобы увидеть его с этим обновлением.

1 голос
/ 08 июля 2018

Если вы используете fontawesome или любые другие веб-иконки, вы можете воспользоваться hasClass jQuery и добавлять / удалять функции класса.Я предпочитаю это, потому что код выглядит чище.

Я предпочитаю каретки вместо плюс-минус.Вы можете использовать fa-plus fa-minus вместо 

<script>
$('.reveal1').click(function(){
    $('.optional-field1').toggle(200);
    
    var child = $(this).children();
    if(child.hasClass('fa-caret-down'))
        child.removeClass('fa-caret-down').addClass('fa-caret-up');
    else
        child.removeClass('fa-caret-up').addClass('fa-caret-down');

    return false;
});
</script>
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="reveal1" href="#">Toggle Expand <i class="fa fa-caret-down"></i></a>

<p class="optional-field1" style="display: none;">
  Lorem Ipsum is simply dummy text
</p
...