показать скрытый текст с открытым/закрытым текстом

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(); 
}); 

ВОТ МОЯ FIDDLE

https://jsfiddle.net/w59by22h/

Если кто-то может помочь было бы очень признателен! Благодаря

Answer 1

Если вы хотите, индикатор переключения для изменения, когда вы двигаете все другие содержания разделов просто удалите «расширенный» класс одновременно с их продвижением.

$(".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 стилем с дисплеем: 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 2

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 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