Переключить текст кнопки «Бутстреп» нажатием кнопки?

Question

Я хочу переключать текст на кнопку каждый раз, когда ее нажимают, например. от «Показать больше ...» до «Показать меньше ...».

У меня есть кнопка, которая используется для разворачивания или свернуть соседний блок (см. Раздел «Документация по Bootstrap» в Collapse, нажмите кнопку «Ссылка с href», чтобы увидеть, что я имею в виду).

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

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"> 
    See more... 
</a> 

Когда блок связанных свернут я хочу текст кнопки, чтобы быть, например, «Показать больше ...», и когда он будет расширен, я хочу, чтобы это было, например. "Показывай меньше...".

Я видел решения, разделяющие текст кнопки выключения в JQuery, JavaScript или CSS - но что делает его трудно читать HTML (текст кнопки находится где-то совсем на кнопку), а также делает его более трудно локализовать.

Answer 1

Использование jQuery ответ прост. Просто отметьте такие кнопки с новым классом называется toggle-text и использовать <span> и <span class="hidden"> пометить текст, который вы хотите, чтобы переключиться назад и вперед между:

<a class="btn btn-primary toggle-text" data-toggle="collapse" href="#collapseExample"> 
    See <span>more</span><span class="hidden">less</span>... 
</a> 

Вы можете иметь столько же или несколько <span> тегов, как вы хотите и можете заказать их, как вы хотите, важно, действительно ли они отмечены классом hidden.

Теперь в Jquery вы можете сделать:

$('.hidden').removeClass('hidden').hide(); 
$('.toggle-text').click(function() { 
    $(this).find('span').each(function() { $(this).toggle(); }); 
}); 

Первая строка немного котельного пластины - JQuery и Bootstrap имеют несколько противоречивые представления о скрыты. Это просто переворачивает все, что вы отметили как скрытые, используя класс Bootstrap hidden, чтобы скрыть jQuery, что упрощает использование функций видимости jQuery .

Следующий бит - это важный материал - он устанавливает обработчик на всех элементах, отмеченных нашим новым классом toggle-text - этот обработчик переключает видимость дочерних элементов данного элемента при его нажатии.

Смотреть все в действии с этим jFiddle - http://jsfiddle.net/w3y421m9/1/

Примечание: имя toggle-text совершенно произвольно и используется только для обозначения кнопок, на которые мы хотим это поведение переключения.

Это первый раз, когда я написал вопрос с намерением ответить на него. Мне интересно узнать, есть ли у кого-то лучший ответ.

Для меня это решение выглядит очень просто и имеет большой плюс сохранения текста кнопки вместе с HTML для кнопки без дополнительных специальных CSS или Javascript/jQuery-кода.

---

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

<span>Show more...</span><span class=hidden">Show less...</span> 
Show <span>more</span><span class=hidden">less</span>... 
Show <span class=hidden">less</span><span>more</span>... 

Answer 2

Вы можете использовать простой jQuery для достижения этой цели.

https://jsfiddle.net/YameenYasin/5j0ehez1/40/

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"> 
    See more... 
</a> 

$('a').click(function(){   
    if($(this).text().trim() == 'See more...'){ 
     $(this).text('See Less...'); 
    }else{ 
     $(this).text('See more...'); 
    } 
}); 

Answer 3

Спасибо за ваши предложения. Вы указали мне в правильном направлении, но я немного изменился. Мое решение использует немного CSS, чтобы сказать, что «скрытые» означает класс, а затем JQuery переключает этот класс по всем элементам SPAN:

HTML (по аналогии с вашими):

<a class="toggle-link" href="..."> 
    <span>Show more...</span> 
    <span class="hidden">Show less...</span> 
</a> 

CSS :

.toggle-link .hidden { 
    display: none; 
} 

Update: Вам не нужно это немного CSS, если вы используете загрузчик, как отметил Джордж Hawkins

JQuery:

jQuery(".toggle-link").click(function() { 
    jQuery(this).find("span").toggleClass("hidden"); 
    /* Add more logic here */ 
}); 

Я не говорю, что лучше само по себе, но для меня это выглядит немного чище. Кроме того, вы можете расширить этот метод, не скрывая текст, но меняя его цвет взад и вперед и т. Д.

Answer 4

Вместо того, чтобы иметь дело с избыточными тегами или размещать альтернативный текст кнопки в пределах ваш JavaScript напрямую, я лично предпочитаю использовать HTML5 custom data attributes. Таким образом, вы можете легко поворачивать между исходными текстами и альтернативного текста на каждом клике, но сохраняйте его относительно вашего переключающего элемента.

jQuery(function($){ 
 
    $('.btn[data-toggle="collapse"]').on('click', function(){ 
 
    $(this) 
 
    .data('text-original', $(this).text()) 
 
    .text($(this).data('text-alt')) 
 
    .data('text-alt', $(this).data('text-original')); 
 
    }); 
 
});

<!--styles--> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!--toggle 1--> 
 
<button class="btn btn-link" data-toggle="collapse" data-target=".details-1" data-text-alt="- hide details">+ show details</button> 
 
<div class="details-1 collapse"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 
</div> 
 

 
<hr> 
 

 
<!--toggle 2--> 
 
<button class="btn btn-link" data-toggle="collapse" data-target=".details-2" data-text-alt="- hide details">+ show details</button> 
 
<div class="details-2 collapse"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 
</div> 
 

 
<!--scripts--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 5

Я попробовал несколько из этих подходов, прежде чем брусчатки этот вместе. Это самый простой, самый читаемый подход, который я видел до сих пор:

<a href="#" data-toggle='collapse' 
     data-target="#filters,#view_filters,#hide_filters" 
     <span id='view_filters' class='collapse in'>View Filters</span> 
     <span id='hide_filters' class='collapse out'>Hide Filters</span> 
    </a> 

    <div id="filters" class="collapse out"> 
     Now you see me! 
    </div> 

Основная цель этой связи является переключить видимость DIV # фильтров ... но он использует несколько селекторов в data_target также переключить видимость двух версий текста ссылки. Просто убедитесь, что у вас есть один текст как «.collapse .in», а другой - «.collapse .out».

Помимо простоты, мне нравится, что это очень надёжно. Поскольку тег никогда не скрывается или не манипулируется, вы никогда не потеряете связь вида/скрытия во время отладки.