Как я могу использовать jQuery для одновременного переключения классов и контента? - PullRequest
Новая
       8

Как я могу использовать jQuery для одновременного переключения классов и контента?

2 голосов
/ 01 февраля 2011

У меня есть диапазон в заголовке, который переключает видимость списка.Первоначально у меня был один пустой и неклассифицированный диапазон, с jQuery, переключающим класс диапазона, и сгенерированный контент в css, изменяющий его содержимое (символ).Однако, поскольку в IE7 происходит сбой в генерируемом контенте, мне пришлось перестроить его, используя два классифицированных и заполненных контентом промежутка - не страшно, но если я смогу каким-то образом объединить .toggleClass & .replaceWith, это было бы здорово, потому что это позволило быупростить разметку - один пустой, неклассифицированный диапазон.Проблемы, с которыми я столкнулся, заключались не в переключении класса при последующем щелчке, а в возврате содержимого.

Текущая рабочая версия: 

<script type="text/javascript">
    $(document).ready(function(){

        $('#semantic-id h3').click(function() {
            $(this).parent('div').find('ul').slideToggle(333);
            $(this).find('span').toggle();
            return false;
        });

        $('#semantic-id h3 a').click(function() {
            window.location = $(this).attr('href');
            return false;
        });
    });
</script>

<div id="semantic-id">
    <h3>
        <span class="open-it">[ + ]</span>
        <span class="close-it">[ - ]</span>
        A List of Things
        <a href="#" title="Add Another One">Add Another One</a>
    </h3>
    <ul> ... </ul>
</div><!--  END div id="semantic-id"    -->

... и я бы предпочел, чтобыразметка: 

<div id="semantic-id">
    <h3>
        <span>&nbsp;</span> A List of Things
        <a href="#" title="Add Another One">Add Another One</a>
    </h3>
    <ul> ... </ul>
</div><!--  END div id="semantic-id"    -->

Я пробовал различные комбинации методов toggleClass, replaceWIth, но мне не удалось вернуться к исходному состоянию при втором щелчке, т. е. закрыть окно, вернуть класс и содержимое div.

Как всегда, любая помощь очень ценится!

...