jquery + простой скрипт переключения + использование более одного раза на одном сайте - PullRequest
Новая
       3

jquery + простой скрипт переключения + использование более одного раза на одном сайте

0 голосов
/ 21 сентября 2011

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

HTML: 

<div  class="toggle">

<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

</div><!-- end .toggle -->

<div class="readMoreDiv">    </div><!-- end .readMoreDiv -->


<div  class="toggle">

<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

</div><!-- end .toggle -->

<div class="readMoreDiv">    </div><!-- end .readMoreDiv -->

Сценарий: 

$(document).ready(function() {


    // Andy Langton's show/hide/mini-accordion - updated 23/11/2009
    // Latest version @ http://andylangton.co.uk/jquery-show-hide
    var showText='down';
    var hideText='up';

    // initialise the visibility check
    var is_visible = false;

    // insert Show/hide links in the readMoreDiv
    $('.toggle').next('.readMoreDiv').html('<a href="#" class="toggleLink">'+showText+'</a>');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

    // capture clicks on the toggle links
    $('a.toggleLink').click(function() {

        // switch visibility
        is_visible = !is_visible;

        // change the link depending on whether the element is shown or hidden
        $(this).html( (!is_visible) ? showText : hideText);

        // toggle the display
        $(this).parent().prev('.toggle').slideToggle();
        return false;
    });


});

Смотрите это в действии здесь: http://jsfiddle.net/CeBEh/

Как вы можете видеть на Fiddle, скрипт работает хорошо, когда вы открываете и закрываете только один div. Но как только вы начинаете открывать и закрывать второй div, пока первый еще открыт, начинаются проблемы ...

Я просто хотел бы, чтобы он работал постоянно, независимо от того, открыт ли в данный момент ни один или все div.

Спасибо!

Ответы [ 4 ]

2 голосов
/ 21 сентября 2011

Избавьтесь от флага is_visible и измените код в функции щелчка следующим образом: 

var toggleDiv = $(this).parent().prev('.toggle');
// change the link depending on whether the element is shown or hidden
$(this).html(toggleDiv.is(":visible") ? showText : hideText);

// toggle the display
toggleDiv.slideToggle();

http://jsfiddle.net/CeBEh/3/

0 голосов
/ 21 сентября 2011

Что делать, если вместо этого вы делаете это следующим образом:

HTML: 

    <div>
        <p class='toggleMe'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        <a class="toggle">
            Hide box
        </a>
    </div>
    <div>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        <a class="toggle">
            Hide box
        </a>
    </div>

javascript: 

    $(document).ready(function(){
          $('.toggle').click(function(){
                $(this).parent().find('p').toggle();
                $(this).text($(this).text() == 'Show box' ? 'Hide box' : 'Show box');
            });
        });
0 голосов
/ 21 сентября 2011

http://jsfiddle.net/CeBEh/1/

Удалите is_visible и проверьте фактический текст по нажатой ссылке.

0 голосов
/ 21 сентября 2011

Проблема в вашей переменной is_visible, которую вы используете в обоих ваших обратных вызовах.Любой a.toggleLink изменит это значение.Попробуйте использовать дополнительный класс, чтобы определить, видим ли div или нет, или что-то еще.

...