2016-06-09 2 views
0

Итак, я недавно собрал выпадающее окно со скрытым контентом и один раз щелкнул, он покажет содержимое позади него, а затем добавит хэш к якорю URL-адреса, чтобы, если ссылка была скопирована и отправлена ​​кому-то другому. После того, как ссылка будет открыта, она автоматически откроет раскрывающийся список, который был выбран.Как добавить класс в раскрывающееся окно, когда содержимое теперь видно?

Вот мой код ...

HTML

<div class="dropdown_wrapper"> 
    <a href="#!window1" id="window1" class="dropdown">Title 1</a> 
    <div class="hidden dropdown_content"> 
     <p>Hidden Content for window 1</p> 
    </div> 
</div> 
<div class="dropdown_wrapper"> 
    <a href="#!window2" id="window2" class="dropdown">Title 2</a> 
    <div class="hidden dropdown_content"> 
     <p>Hidden Content for window 2</p> 
    </div> 
</div> 

JQuery, который открывает выпадающее меню, если он содержит конкретную окрошку

$(document).ready(function() { 
    var urlHash = window.location.hash.replace('#!', ''); 
    if (window.location.hash.indexOf('!') == 1 && $('.dropdown_wrapper').length > 0) { 
     $('#' + urlHash).next('.dropdown_content').slideDown(300); 
    } 
}); 

JQuery для реальной функциональности OnClick, чтобы открыть выпадающее меню

$('.dropdown').click(function(){ 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
     $(this).next('.dropdown_content').slideUp(300); 
    }else{ 
     $(this).addClass('active'); 
     $(this).next('.dropdown_content').slideDown(300); 
    } 
}); 

Мой вопрос в том, как получить активный класс, который меняет кнопку, которую я получаю от плюса до минуса, как если бы он был нажат, когда кто-то перешел прямо к URL-адресу с раскрывающимся списком?

ответ

0

Вы уже значок подкачки реализован правильно? Не было бы так просто, как тогда?

$('#' + urlHash).addClass('active') 

в вашем $ (документ) .ready() {}

P.S .: Я не уверен, если я полностью понял ваш вопрос. Так что просто скажи мне, если ты имеешь в виду это по-другому.

+0

Не могу поверить, что я пропустил что-то настолько простое ... Спасибо за помощь! –

0

Добавить своп изображения в Css при активной

.active { 
     background-image:url("ulrto Plus Image Here") !important 
} 

и на всех остальных Выберите элементы изменить CSS для

.DropDownMenuItem { 
    background-image:url("ulr to Minus Image Here") 
} 
Смежные вопросы