2013-02-19 3 views
0

Пробовал так много разных сценариев, чтобы попытаться получить эту работу, пришлось бросить полотенце и спросить. Мой JQuery настроен - это внешний JS-файл, на который ссылается в разделе главы, и я добавляю JQuery-код к этому файлу. Также есть тема Twitter Bootstrap, которая имеет свои собственные классы и скрипты. На этом посту http://skipology.com/iphoneography-applications-most-used/ Я создал несколько расширяемых divs, используя Bootstrap Twitter, встроенный в код/​​классы. HTML для якоря запускающего расширяющейся и закрывание:Изменить текст в Anchor on Click (Twitter Bootstrap Theme)

<ul class="nav nav-tabs"><li class="active expandable"><a role="button" tabindex="0" 
data-toggle="collapse" data-target="#snapseed"><i class="icon-sort icon-large"></i> 
More...</a></li><ul> 

То, что я пытаюсь сделать, это изменить «Подробнее ...» текст «Меньше ...», когда DIV расширяется. Я пробовал различные сценарии, включая добавление пролетов и использование toggle(), вызванных щелчком или onclick, но ничего не работает. Twitter Bootstrap имеет различные события, которые я мог бы использовать, а не щелкнуть или onclick. Я думаю, например, показать: показано: hide: и скрыто:

Я думаю, что сочетание JQuery, Wordpress и Bootstrap меня совершенно сбивает с толку. Я знаю, что могу сделать это на статичном сайте. Может ли кто-нибудь придумать сценарий?

+0

jQuery в WordPress - это то же самое, что и jQuery где-либо еще, кроме как вы загружаете t он скрипты (wp_register_script/wp_enqueue_script) и в том, что JQuery загружается в режиме «Без конфликтов». –

+0

Я попробовал кусочки кода в Fiddle, и они, похоже, работали, что заставило меня задаться вопросом, была ли это проблемой Wordpress или, вероятно, более вероятной проблемой с Bootstrap - так или иначе я предполагаю, что это JQuery, а не Wordpress. –

ответ

0

Попробуйте это:

$('li.expandable a[data-toggle="collapse"]').on('click',function(){ 
    if ($($(this).data('target')).hasClass('in')){ 
     $(this).val(($(this).val()).replace(/More/,'Less')); 
    } 
    else{ 
     $(this).val(($(this).val()).replace(/Less/,'More')); 
    } 
}) 
+0

Спасибо. Действительно добрый, но не имеет никакого эффекта. –

0

Это работало для меня

$('[data-toggle="collapse"]').click(function() { 
     $(this).text($(this).text() == 'More' ? 'Less' : 'More'); 
}); 

Google привел меня к этому source

Примечание: Я использую JQuery + Bootstrap, но НЕ Wordpress, так это могут быть разными

+0

Спасибо, я пропустил это уведомление, попробует. Большое спасибо. –