Question

我知道解决方案可能非常简单，但我的JavaScript / Jquery能力不足。

我想修改一个可扩展/可折叠列表，该列表使用.slideToggle（）来展开隐藏列表，以便在单击新列表项时，先前单击的列表项将被关闭。

jQuery.noConflict();
(function ($) {
    $(document).ready(function () {
        $('#myScript').remove();
        $('.mylist').columns({
            columns: 1
        });
        // 'hide' function is called on each of the 'ul' elements with the class 'guide_links'
        $('ul.guide_links').hide();
        // DOM insert a link element inside of each of the subject list items.
        $('li.subject_link').prepend('<a href="javascript://toggle guide links" class="toggle_button">+</a>');
        // enable toggle action on each Subject LI
        $('li.subject_link').bind("click", function () {
            // toggles text in the link between '+' and '-'.
            if ($(this).children('a.toggle_button').text() == '+') {
                $(this).children('a.toggle_button').text('-');
            } else {
                $(this).children('a.toggle_button').text('+');
            }
            // Toggle the child 'ul' element
            $(this).children('ul.guide_links').slideToggle("fast");
        });

        $('a.subject_link_a').contents().unwrap();
        $('a[href^="http://"]').not('a[href*=gusdecool]').attr('target', '_blank');
    });
})(jQuery);

Answer 1

只需将点击功能更改为：

＆＃13;

$('li.subject_link').bind("click", function () {
    $('a.toggle_button').text('+');
    $('ul.guide_links').hide();
    
    $(this).children('a.toggle_button').text('-');
    $(this).children('ul.guide_links').slideToggle("fast");
});

＆＃13;

关闭所有列表并将所有文本更改为＆＃39; +＆＃39;。比套装＆＃39; - ＆＃39;对于单击的项目文本并打开子列表。

Answer 2

绑定click事件时，需要先初始化其他列表元素：

....
$('li.subject_link').bind("click", function(){

    //initialize 
    $('ul a.toggle_button').text('-');
    $('ul ul.guide_links').slideUp("fast");

    // toggles text in the link between '+' and '-'.
    .......

.slideToggle（）;一次只有一个<url> </uk>

2 个答案: