Question

我正在尝试根据菜单链接标题的打开和关闭状态更改打开关闭指示符（+/-）。页面加载时，我可以单击其中一个标题，所有链接都将关闭，但只有一个指标会发生变化。我需要根据每个标题链接的实际状态更改所有指标。

这是我提取的HTML

<h4 class="toggle">LINK ONE</h4>
<ul class="content">
  <li><a href="index_ct.html#/UserAdmin_Users_All">Live tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_Roles_DealerAdmin">Historical tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_SecurityGroups">Manage locations</a></li>
</ul>

<h4 class="toggle">LINK TWO</h4>
<ul class="content">
  <li><a href="index_ct.html#/UserAdmin_Users_All">Live tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_Roles_DealerAdmin">Historical tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_SecurityGroups">Manage locations</a></li>
</ul>

<h4 class="toggle">LINK THREE</h4>
<ul class="content">
  <li><a href="index_ct.html#/UserAdmin_Users_All">Live tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_Roles_DealerAdmin">Historical tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_SecurityGroups">Manage locations</a></li>
</ul>

<h4 class="toggle">LINK FOUR</h4>
<ul class="content">
  <li><a href="index_ct.html#/UserAdmin_Users_All">Live tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_Roles_DealerAdmin">Historical tracking</a></li>
  <li><a href="index_ct.html#/UserAdmin_SecurityGroups">Manage locations</a></li>
</ul>

JQUERY

$(".toggle").on("click", function(e){
    var target = $(this).next('.content');
    $(this).toggleClass("expanded");
    target.slideToggle();
    $('.content').not( target ).slideUp();
});

这是我的想法

https://jsfiddle.net/w59by22h/

如果有人可以提供帮助，我们将不胜感激！感谢

Answer 1

DEMO https://jsfiddle.net/w59by22h/1/

    $(".toggle").each(
        function(i, el) {
             $(el).on("click", function(e){
                var target = $(this).next('.content');
                $(this).toggleClass("expanded");
                target.slideToggle();
                $('.content').not( target ).slideUp();
        });
        }
    );

将.click事件附加到每个.toggle类，而不是一起

Answer 2

如果您希望在向上滑动所有其他内容部分时更改切换指示符，只需在向上滑动的同时删除“展开”类。

$(".toggle").on("click", function(e){
    var target = $(this).next('.content');
    $(this).toggleClass("expanded");
    target.slideToggle();
    $('.toggle').not( $(this) ).removeClass("expanded");
    $('.content').not( target ).slideUp();
});

如果您希望它们在页面加载时匹配，则有2个选项。

选项1：如果您希望它们全部开始关闭使每个UL标签都具有display：none的样式。

<h4 class="toggle">LINK ONE</h4>
<ul class="content" style="display: none;">
    <li><a href="index_ct.html#/UserAdmin_Users_All">Live tracking</a></li>
    <li><a href="index_ct.html#/UserAdmin_Roles_DealerAdmin">Historical tracking</a></li>
    <li><a href="index_ct.html#/UserAdmin_SecurityGroups">Manage locations</a></li>
</ul>

选项2：如果您希望它们全部开始打开，请将“扩展”类添加到每个h4

<h4 class="toggle expanded">LINK ONE</h4>
<ul class="content">
    <li><a href="index_ct.html#/UserAdmin_Users_All">Live tracking</a></li>
    <li><a href="index_ct.html#/UserAdmin_Roles_DealerAdmin">Historical tracking</a></li>
    <li><a href="index_ct.html#/UserAdmin_SecurityGroups">Manage locations</a></li>
</ul>

我还更新了你的小提琴让他们开始关闭。

https://jsfiddle.net/w59by22h/3/

Answer 3

这将做你想要的：

$(".toggle").on("click", function(e){
    $('.content').slideUp();
    $('.toggle').removeClass('expanded');

    var target = $(this).next('.content');
    if ( !target.is(':visible') ){
        $(this).toggleClass("expanded");
        target.slideToggle();
    }
});

jsFiddle Demo

show使用打开/关闭文本隐藏多个内容

3 个答案: