Сбой при загрузке Twitter: изменение отображения кнопки переключения

Я использую Twitter Bootstrap для создания разборчивых разделов текста. Секции расширяются при нажатии кнопки +. Мой html-код выглядит следующим образом:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

Есть ли способ изменить кнопку, чтобы отобразить - вместо + после того, как раздел будет расширен (и снова вернитесь к +, когда он снова свернут)?

Дополнительная информация. Я надеялся, что в моей проблеме будет простое решение для twitter-bootstrap/css/html. Все ответы до сих пор используют JavaScript или PHP. Из-за этого я хочу добавить дополнительную информацию о моей среде разработки: я хочу использовать это решение на веб-сайте SilverStripe (версия 3.0.5), который имеет некоторые последствия для использования как PHP, так и JavaScript.

ОТВЕТЫ

Ответ 1

попробуйте это. http://jsfiddle.net/fVpkm/

Html: -

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS: -

$('button').click(function(){ //you can give id or class name here for $('button')
    $(this).text(function(i,old){
        return old=='+' ?  '-' : '+';
    });
});

Обновление С чистыми Css, псевдо элементами

http://jsfiddle.net/r4Bdz/

Поддерживаемые браузеры

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

Обновление 2 С чистым Javascript

http://jsfiddle.net/WteTy/

function handleClick()
{
    this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;

Ответ 2

Здесь другое только CSS решение, которое работает с любым макетом HTML.

Он работает с любым элементом, который вам нужно переключить. Каким бы ни был ваш макет переключения, вы просто помещаете его внутри пары элементов с классами if-collapsed и if-not-collapsed внутри элемента переключения.

Единственный улов в том, что вы должны убедиться, что вы установите желаемое начальное состояние переключателя. Если он был первоначально закрыт, тогда поставьте класс collapsed на переключатель.

Он также требует селектора :not, поэтому он не работает на IE8.

Пример HTML:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Меньшая версия:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

Версия CSS:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

JS Fiddle

Ответ 3

Все остальные решения, размещенные здесь, вызывают переключение между синхронизацией, если он дважды щелкнут. В следующем решении используются события обеспечиваемые базой Bootstrap, и переключатель всегда соответствует состоянию сбрасываемого элемента:

HTML:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS:

$('#intro').on('show', function() {
  $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
  $('#intro-switch').html('+')
})

Это должно работать в большинстве случаев.

Однако я также столкнулся с дополнительной проблемой при попытке вставить один складной элемент и его тумблер внутри другого складного элемента. С помощью вышеприведенного кода, когда я нажимаю вложенный переключатель, чтобы скрыть вложенный складной элемент, изменяется и переключатель для родительского элемента. Это может быть ошибка в Bootstrap. Я нашел решение, которое, похоже, работает: я добавил "скомпенсированный" класс в коммутаторы (Bootstrap добавляет это, когда сложенный элемент скрыт, но он не начинается с него), а затем добавил, что для селектора jQuery для скрыть функцию:

http://jsfiddle.net/fVpkm/87/

HTML:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...<br>
        <a id="details-switch" class="collapsed" data-toggle="collapse" href="#details">Show details</a>
        <div id="details" class="collapse">
            More details...
        </div>
    </div>
</div>

JS:

$('#intro').on('show', function() {
    $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
    $('#intro-switch.collapsed').html('+')
})

$('#details').on('show', function() {
    $('#details-switch').html('Hide details')
})
$('#details').on('hide', function() {
    $('#details-switch.collapsed').html('Show details')
})

Ответ 4

Добавьте код jquery, для этого вам нужно jquery:

<script>
        $(".btn[data-toggle='collapse']").click(function() {
            if ($(this).text() == '+') {
                $(this).text('-');
            } else {
                $(this).text('+');
            }
        });
        </script>

Ответ 5

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

Что я буду делать? Я бы нашел класс /id элементов DOM, которые содержат знак + (предположим, что он ".collapsible" и с Javascript (на самом деле jQuery):

<script>
     $(document).ready(function() {
         var content=$(".collapsible").html().replace("+", "-");
         $(".collapsible").html(content));
     });
</script>

изменить Хорошо... Извините, я не смотрел код начальной загрузки... но я думаю, что он работает с чем-то вроде slideToggle или slideDown and slideUp... Представьте себе, что slideToggle для элементов класса .collapsible, которые показывают содержимое некоторых элементов .info. Тогда:

         $(".collapsible").click(function() { 
             var content=$(".collapsible").html();
             if $(this).next().css("display") === "none") { 
                 $(".collapsible").html(content.replace("+", "-"));
             }
             else $(".collapsible").html(content.replace("-", "+"));
         });

Это похоже на противоположную вещь, но поскольку фактическая анимация работает параллельно, вы проверите css перед анимацией и почему вам нужно проверить, видимо ли это (что будет означать, что она будет скрыта после анимации завершите), а затем установите соответствующие + или -.

Ответ 6

Мне понравилось только CSS-решение из PSL, но в моем случае мне нужно было включить HTML-код в кнопку, а свойство CSS содержимого показывается HTML с тегами в этом случае.

В случае, если это может помочь кому-то другому, я разворачивал свою скрипту, чтобы покрыть мой прецедент: http://jsfiddle.net/brunoalla/99j11h40/2/

HTML:

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">
            <span class="show-ctrl">
                <i class="fa fa-chevron-down"></i> Expand
            </span>
            <span class="hide-ctrl">
                <i class="fa fa-chevron-up"></i> Collapse
            </span>            
        </button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

CSS

button.btn .show-ctrl{
    display: none;
}
button.btn .hide-ctrl{
    display: block;
}
button.btn.collapsed .show-ctrl{
    display: block;
}
button.btn.collapsed .hide-ctrl{
    display: none;
}

Ответ 7

Легче с встроенным кодированием

<button type="button" ng-click="showmore = (showmore !=null && showmore) ? false : true;" class="btn float-right" data-toggle="collapse" data-target="#moreoptions">
            <span class="glyphicon" ng-class="showmore ? 'glyphicon-collapse-up': 'glyphicon-collapse-down'"></span>
            {{ showmore !=null && showmore ? "Hide More Options" : "Show More Options" }}
        </button>


<div id="moreoptions" class="collapse">Your Panel</div>

Ответ 8

Некоторые могут столкнуться с проблемой изменения Bootstrap js (и, возможно, так и есть), но для этого это двухлинейный подход.

В bootstrap.js найдите функцию Collapse.prototype.show и измените этот вызов $. $, чтобы добавить изменение html следующим образом:

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)
  .html('Collapse')

Аналогично в функции Collapse.prototype.hide измените его на

this.$trigger
  .addClass('collapsed')
  .attr('aria-expanded', false)
  .html('Expand')

Это приведет к переключению текста между "Collapse", когда все будет расширено и "Разверните", когда все рухнет.

Две строки. Готово.

EDIT: longterm это не сработает. bootstrap.js является частью пакета Nuget, поэтому я не думаю, что он рекламировал мои изменения на сервере. Как уже упоминалось ранее, не самая лучшая практика в любом случае для редактирования bootstrap.js, поэтому я реализовал PSL-решение, которое отлично работало. Тем не менее, мое решение будет работать локально, если вам нужно что-то быстро, чтобы попробовать.

Ответ 9

Мое следующее решение JS лучше, чем другие подходы здесь, потому что он гарантирует, что он всегда будет говорить "открыто", когда цель закрыта, и наоборот.

HTML:

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JS:

$('[data-toggle-secondary]').each(function() {
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() {
        if ($toggle.text() == originalText) {
            $toggle.text(secondaryText);
        } else {
            $toggle.text(originalText);
        }
    });
});

Примеры:

$('[data-toggle-secondary]').each(function() {
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() {
        if ($toggle.text() == originalText) {
            $toggle.text(secondaryText);
        } else {
            $toggle.text(originalText);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="#" onclick="location.href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css'; return false;" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>