Question

我在使用jquery从外部ul向上和向下滑动内部<div class="container help-container" role="main"> <div class="row"> <div class="col-sm-12"> <div class="col-sm-4 help-index"> <div class="index-header">Index</div> <ul class="index-list sidebar-navigation"> <li> <a href="#!"> <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span> Education </a> <ul class="index-sublist sidebar-inner-list"> <li class="active-index"><a href="#!">Glossary of Acronyms</a></li> <li><a href="#!">Glossary of Terms</a></li> </ul> </li> <li> <a href="#!"> <span class="glyphicon glyphicon-triangle-right" aria- hidden="true"></span>Index2 </a> <ul class="index-sublist sidebar-inner-list"> <li><a href="#!">Index2</a></li> <li><a href="#!">Index2</a></li> </ul> </li> <li> <a href="#!"> <span class="glyphicon glyphicon-triangle-right" aria- hidden="true"></span>Index3 </a> </li> <li> <a href="#!"> <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Index4 </a> </li> </ul> </div> </div> </div> </div>时遇到向上/向下箭头问题。

我可以在向下滑动时更改按钮图标，但无法在向上滑动时更改它。

下面是html和js代码：

$('.sidebar-inner-list > li').hide();
$('.sidebar-navigation > li').each(function () {
    $(this).click(function () {
        $('.sidebar-navigation > li').not(this).find('li').slideUp();
        $(this).find('span').removeClass('glyphicon-triangle-    right').
        addClass('glyphicon-triangle-bottom');
        $(this).find('.sidebar-inner-list li').slideDown();
        return false;
    });
});

JS：

{{1}}

这是一个小提琴链接：https://jsfiddle.net/gbhopale/pmz614x8/

Answer 1

您需要将其添加到脚本

$('.sidebar-navigation > li span').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');

所以每次点击它都会从下到右改变箭头，然后运行你的脚本并将可点击的只更改为底部箭头。

你的脚本：

$('.sidebar-inner-list > li').hide();

$('.sidebar-navigation > li').each(function () {
    $(this).click(function () {
        $('.sidebar-navigation > li span').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');
        $('.sidebar-navigation > li').not(this).find('li').slideUp();
        $(this).find('span').removeClass('glyphicon-triangle-right').addClass('glyphicon-triangle-bottom');

        $(this).find('.sidebar-inner-list li').slideDown();
        return false;
    });
});

工作小提琴：https://jsfiddle.net/pmz614x8/1/

jquery上下滑动内部ul li并相应地改变向上和向下箭头

1 个答案: