Хобрук: Ваш путь к мастерству в программировании

Переключение отображения/скрытия закрепленных элементов div

У меня есть список Сервисов с их соответствующими описаниями, на которые я ссылаюсь якорными ссылками. Детали службы скрыты, пока я не нажму на имя службы. Я не могу скрыть ранее нажатые службы, они перекрываются.

Это JSFiddle того, что я смог собрать до сих пор:

https://jsfiddle.net/rdhn60mb/

$('#home-header .service-box li a').click(function() {
    $($(this).attr('href')).css('display', 'block');
});

/*

$("#home-header .service-box li a").click(function(){
    var $name = $(this).text();
    var $activebox = ($("#" + $name).length === 0) ;


    $("#home-header .service-details").not($activebox).hide();
    $("#home-header .service-details").not($activebox).removeClass('active');

    $activebox.toggle();
    $activebox.toggleClass('active');

});

*/

(Закомментированный код не работает, но он близок к тому, чего я пытаюсь добиться).

Всем спасибо за помощь!

Синтия

javascript html toggle jquery anchor
29.09.2015

Ответы:


1

Я бы согласился с ответом divy3993, но немного улучшил его:

$('#home-header .service-box li a').click(function() {
    $('.service-details').hide();
    $($(this).attr('href')).toggle();
});

В этом случае переключатель является более эффективной функцией.

Вы можете увидеть пример в этой скрипте: https://jsfiddle.net/rockmandew/rdhn60mb/6/< /а>

29.09.2015
  • Спасибо, парни! Это приближается. Я также хочу иметь возможность щелкнуть ту же ссылку и переключиться, чтобы она закрылась. В идеале я также хочу иметь возможность щелкнуть за пределами ссылки (в любом месте на странице) и закрыть ее. Это новый Fiddle с добавленными мной дополнительными функциями. jsfiddle.net/dwxn7pfk работа заключается в том, что когда вы дважды нажимаете на одну и ту же ссылку (чтобы переключить открытие/закрытие), активный класс и переключатели открытия/закрытия не работают. 30.09.2015

    • 2

    Посмотрите, в вашем случае это перекрывается, так как вы никогда не закрываете/не прячете их. Так как JavaScript/JQuery выполняется построчно. Мы сначала закроем/скроем их все $('.service-details').hide(); по клику, а затем откроем/покажем только текущую.

    JQuery

    $('#home-header .service-box li a').click(function() {
    $('.service-details').hide();
    $($(this).attr('href')).css('display', 'block');
});

    ОБНОВЛЕНИЕ:

    Fiddle: демо

    Примечание. Здесь в демо я использовал fadeIn(), так что это дает эффект сглаживания. Также бесполезно использовать что-либо еще, например toggle(). Поскольку вы скрываете все service-details, прежде чем показывать, поэтому нет необходимости в toggle().

    29.09.2015

    3

    Чтобы снова закрыть div, если щелкнуть ту же ссылку, как вы хотели. Просто оберните ее в статус if, проверяя, имеет ли текущая активная вкладка тот же идентификатор, что и значение href. Если это так, не запускайте шоу

    //if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {

     //remove the current active class
     $('.service-details').removeClass( "active" );

    //fade in the div
    $($(this).attr('href')).fadeIn();

    //add the class active to the div
    $($(this).attr('href')).addClass( "active" );
}

    Вот jsfiddle с правками, и я также добавил затухание, чтобы сделать его менее нервным.

    https://jsfiddle.net/rdhn60mb/21/

    31.05.2016
    Новые материалы
    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..